Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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)
Prochain SlideShare
Chargement dans…5
×

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

1 372 vues

Publié le

Presentation from JS Belgrade Meetup #5

Publié dans : Logiciels
  • Identifiez-vous pour voir les commentaires

"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)

×