Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
...
quick intro
(in case living under a rock)
- “JAVA script” client side framework
(they call it like that when they contact ...
module
- Logical containers
- Module -> [controllers, filters, directives, services, factories, animations, configs]
Examp...
DI
- each app has one $injector
- $injector can instantiate types, invoke
methods, load modules
- instance cache + instanc...
controller
- more like view models, less like controllers
- controller ~ view relation: 1-1
- can be used in relation 1-m ...
scopes
- objects containing view related functions and properties
- each controller has one
- app has one “parent” scope ~...
views
At the beginning (0.x ~ 1.x) there were only classic,
because the ng team thought directives could be used as
compos...
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...
directives
- composable components
- can have their own scope
- they are not providers, as they are more of an extension
t...
DDO
yourModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
t...
directive intrinsics
phases
- compile
- preLink
- postLink
- link
directive source example
/**
* @question
* Guess which element does this native directive extend?
*/
var htmlAnchorDirecti...
directives
most usable ones:
- model
- event (ng-click, ng-mouseover...)
- value
- bind
- class
- include
- repeat
- show
...
filters
- think of it as a formatter
- an ng service used for formatting data to the user
- example
{{ expression | filter...
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
f...
provider
- Configurable factory
- Meaning it has configuration options and a creation
function ($get)
- Can be used during...
provider source
function provider(name, provider_) {
assertNotHasOwnProperty(name, 'service');
if (isFunction(provider_) |...
provider examples
someModule.provider('providerName', function (){
var trackingUrl = '/track';
// A provider method for co...
factory
- well known
- most widely used
- private functions
- provider with a $get function
- // angular.factory('someFact...
factory source
function factory(name, factoryFn, enforce) {
return provider(name, {
$get: enforce !== false ? enforceRetur...
factory examples
someModule.factory('ping', ['$http', function($http) {
return {
ping: function {
return $http.send('/ping...
constant
- we all know what constant means
- can’t be decorated (not shit, Sherlock)
- injectable during config phase
- Ex...
constant source
function constant(name, value) {
assertNotHasOwnProperty(name, 'constant');
providerCache[name] = value;
i...
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 ...
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 $inje...
service examples
var ServiceName = function($http) {
this.$http = $http;
};
ServiceName.$inject = ['$http'];
ServiceName.p...
decorator
- Service instantiation interceptor
- Behavior override
- Modify / encapsulate other providers
- Can decorate ev...
decorator source
function decorator(serviceName, decorFn) {
var origProvider = providerInjector.get(serviceName + provider...
decorator example
/**
* @description
*
* Here we decorate the ns.$log service to convert warnings to errors
*/
angular.dec...
Change detection
- dirty checking
- consists of running equality checks over all
of the data that the view depends on
Questions
(answers not promised)
Upcoming SlideShare
Loading in …5
×

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

1,262 views

Published on

Presentation from JS Belgrade Meetup #5

Published in: Software
  • Be the first to comment

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

  1. 1. Angular.js Concepts in Depth (we need to go deeper)
  2. 2. 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)
  3. 3. 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
  4. 4. 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)
  5. 5. 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) {});
  6. 6. 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)
  7. 7. scopes - objects containing view related functions and properties - each controller has one - app has one “parent” scope ~ $rootScope - children can have their own children
  8. 8. 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
  9. 9. templates ~ an HTML fragment ~ partial view - mostly used by directives
  10. 10. 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)
  11. 11. 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)
  12. 12. 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; });
  13. 13. directive intrinsics phases - compile - preLink - postLink - link
  14. 14. 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(); } }); }; } } });
  15. 15. 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
  16. 16. 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)
  17. 17. filters native filter list: - currency - date - filter - json - limitTo - lowercase - number - orderBy - uppercase
  18. 18. 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)
  19. 19. provider - Configurable factory - Meaning it has configuration options and a creation function ($get) - Can be used during the config phase - // angular.provider('providerName');
  20. 20. 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_; }
  21. 21. 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); } }; }]; });
  22. 22. factory - well known - most widely used - private functions - provider with a $get function - // angular.factory('someFactory', factoryObject)
  23. 23. 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; }; }
  24. 24. 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(); }]);
  25. 25. constant - we all know what constant means - can’t be decorated (not shit, Sherlock) - injectable during config phase - Example: angular.constant('someConstantName', constantValue)
  26. 26. constant source function constant(name, value) { assertNotHasOwnProperty(name, 'constant'); providerCache[name] = value; instanceCache[name] = value; }
  27. 27. constant – examples someModule.constant('SHARD_HEIGHT', 306); someModule.constant('MY_COLOURS', ['red', 'blue', 'grey']);
  28. 28. 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)
  29. 29. value source function value(name, val) { return factory(name, valueFn(val), false); }
  30. 30. service - known but not so widespread - injectable constructor example: angular.service('ServiceName', serviceObj);
  31. 31. service source function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]); }
  32. 32. 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'); }; });
  33. 33. 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);
  34. 34. 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}); }; }
  35. 35. 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; }]);
  36. 36. Change detection - dirty checking - consists of running equality checks over all of the data that the view depends on
  37. 37. Questions (answers not promised)

×