"Angular.js Concepts in Depth" by Aleksandar Simović

Angular.js Concepts in Depth (we need to go deeper)

Brief overview Quick intro (~2 min) Core concepts: - Modules - DI - Controllers - Scopes - Views - Directives - Templates - Filters - Providers Change detection Note: (lns are based on Angular 1.4.0-rc.0)

quick intro (in case living under a rock) - “JAVA script” client side framework (they call it like that when they contact you from an HR agency) - Imposes MVW architecture - Component based - DI

module - Logical containers - Module -> [controllers, filters, directives, services, factories, animations, configs] Example: angular.module('yourApp', ['yourDependency']); its phases - or blocks: - config (define your app configuration, e.g. routes, only providers & constants) - run (similar to a main method, not needed but sometimes useful, only instances & constants)

DI - each app has one $injector - $injector can instantiate types, invoke methods, load modules - instance cache + instance factory - credited with making all providers singletons - $injector.get() -> if inCache() return from cache -> else instantiate a small DI usage example : yourApp.controller('yourCtrl', function($scope) {});

controller - more like view models, less like controllers - controller ~ view relation: 1-1 - can be used in relation 1-m (not the usual practice) - each controller has its own scope and view which contains what is shown - created by ~ $controllerProvider (lns 8645 - 8791)

scopes - objects containing view related functions and properties - each controller has one - app has one “parent” scope ~ $rootScope - children can have their own children

views At the beginning (0.x ~ 1.x) there were only classic, because the ng team thought directives could be used as composite views with state - classic views: ng-route - kinda composite: ng-include - composite views: ui-router

templates ~ an HTML fragment ~ partial view - mostly used by directives

expressions - code placed in “{{ }}” handlebars represent expressions example: <div>{{ 3+5 }}</div> - before rendering the actual template, its expressions are compiled by $interpolate service - detrimental to performance - always check their performance with batarang - one time binding “::” (!= one-way data binding) (lns 10485 - 10584)

directives - composable components - can have their own scope - they are not providers, as they are more of an extension to the DOM elements, but they do have their $compileProvider (lns 5924 - 8518) - can have its own controller (one of the reasons why in the first Angular versions there was no need for composite view)

DDO yourModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', // or // function(tElement, tAttrs) { ... }, // or // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, transclude: false, restrict: 'A', replace: true, templateNamespace: 'html', scope: false, controller: function($scope, $element, $attrs, $transclude, otherInjectables) { /**...*/ }, controllerAs: 'stringIdentifier', bindToController: false, require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '? ^optionalParent'], compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { /**...*/ }, post: function postLink(scope, iElement, iAttrs, controller) { /**...*/ } }; // or // return function postLink( ... ) { ... } } // or // link: { // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... } }; return directiveDefinitionObject; });

directive intrinsics phases - compile - preLink - postLink - link

directive source example /** * @question * Guess which element does this native directive extend? */ var htmlAnchorDirective = valueFn({ restrict: 'E', compile: function(element, attr) { if (!attr.href && !attr.xlinkHref) { return function(scope, element) { // If the linked element is not an anchor tag anymore, do nothing if (element[0].nodeName.toLowerCase() !== 'a') return; // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute. var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? 'xlink:href' : 'href'; element.on('click', function(event) { // if we have no href url, then don't navigate anywhere. if (!element.attr(href)) { event.preventDefault(); } }); }; } } });

directives most usable ones: - model - event (ng-click, ng-mouseover...) - value - bind - class - include - repeat - show - switch the main list is within lns 18928 - 27672

filters - think of it as a formatter - an ng service used for formatting data to the user - example {{ expression | filter_name[:parameter_value] ... ] }} - when registering them, Angular automatically adds “Filter” postfix to them, in order not to mix them with other services - all filters are handled by their own provider ~ $FilterProvider (lns 17663 - 18926)

filters native filter list: - currency - date - filter - json - limitTo - lowercase - number - orderBy - uppercase

providers - referred to as “services” (op term) - Represent the state of your app - List of providers: provider constant factory service decorator value (lns 4170 - 4402)

provider - Configurable factory - Meaning it has configuration options and a creation function ($get) - Can be used during the config phase - // angular.provider('providerName');

provider source function provider(name, provider_) { assertNotHasOwnProperty(name, 'service'); if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (!provider_.$get) { throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name); } return providerCache[name + providerSuffix] = provider_; }

provider examples someModule.provider('providerName', function (){ var trackingUrl = '/track'; // A provider method for configuring where the tracked events should been saved this.setTrackingUrl = function(url) { trackingUrl = url; }; // The service factory function this.$get = ['$http', function($http) { var trackedEvents = {}; return { // Call this to track an event event: function(event) { var count = trackedEvents[event] || 0; count += 1; trackedEvents[event] = count; return count; }, // Call this to save the tracked events to the trackingUrl save: function() { $http.post(trackingUrl, trackedEvents); } }; }]; });

factory - well known - most widely used - private functions - provider with a $get function - // angular.factory('someFactory', factoryObject)

factory source function factory(name, factoryFn, enforce) { return provider(name, { $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn }); } function enforceReturnValue(name, factory) { return function enforcedReturnValue() { var result = instanceInjector.invoke(factory, this); if (isUndefined(result)) { throw $injectorMinErr('undef', "Provider '{0}' must return a value from $get factory method.", name); } return result; }; }

factory examples someModule.factory('ping', ['$http', function($http) { return { ping: function { return $http.send('/ping'); }; }]); someModule.controller('Ctrl', ['ping', function(ping) { ping(); }]); someModule.factory('ping', ['$http', function($http) { return function ping() { return $http.send('/ping'); }; }]); someModule.controller('Ctrl', ['ping', function(ping) { ping(); }]);

constant - we all know what constant means - can’t be decorated (not shit, Sherlock) - injectable during config phase - Example: angular.constant('someConstantName', constantValue)

constant source function constant(name, value) { assertNotHasOwnProperty(name, 'constant'); providerCache[name] = value; instanceCache[name] = value; }

constant – examples someModule.constant('SHARD_HEIGHT', 306); someModule.constant('MY_COLOURS', ['red', 'blue', 'grey']);

value - can not be injected in the config phase - represents an angular variable that can be injected and used throughout your providers, directives, controllers example: angular.value('someValue', actualValue)

value source function value(name, val) { return factory(name, valueFn(val), false); }

service - known but not so widespread - injectable constructor example: angular.service('ServiceName', serviceObj);

service source function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]); }

service examples var ServiceName = function($http) { this.$http = $http; }; ServiceName.$inject = ['$http']; ServiceName.prototype.send = function() { return this.$http.get('/some-http-address'); }; $provide.service('ServiceName', ServiceName); angular.service('ServiceName', function($http){ this.$http = $http; this.send = function() { return this.$http.get('/some-http-address'); }; });

decorator - Service instantiation interceptor - Behavior override - Modify / encapsulate other providers - Can decorate every provider, except constant - Less known, barely used - why? - angular-mocks uses it to add flush() to $timeout angular.decorator('someDecorator', decoratorObj);

decorator source function decorator(serviceName, decorFn) { var origProvider = providerInjector.get(serviceName + providerSuffix), orig$get = origProvider.$get; origProvider.$get = function() { var origInstance = instanceInjector.invoke(orig$get, origProvider); return instanceInjector.invoke(decorFn, null, {$delegate: origInstance}); }; }

decorator example /** * @description * * Here we decorate the ns.$log service to convert warnings to errors */ angular.decorator('$log', ['$delegate', function ($delegate) { delegate.warn = delegate.error; return delegate; }]);

Change detection - dirty checking - consists of running equality checks over all of the data that the view depends on

Questions (answers not promised)

"Angular.js Concepts in Depth" by Aleksandar Simović

More Related Content

What's hot

Similar to "Angular.js Concepts in Depth" by Aleksandar Simović

Recently uploaded

"Angular.js Concepts in Depth" by Aleksandar Simović