AngularJs presentation
•Download as PPTX, PDF•
1 like•1,407 views
What is AngularJS AngularJS main components View / Controller / Module / Scope Scope Inheritance. Two way data binding $watch / $digest / $apply Dirty Checking DI - Dependence Injection $provider vs $factory vs $service
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to AngularJs presentation
Similar to AngularJs presentation (20)
Recently uploaded
Recently uploaded (20)
AngularJs presentation
- 1. AngularJS
- 2. • What is AngularJS • AngularJS main components – View / Controller / Module / Scope • Scope Inheritance. • Two way data binding – $watch / $digest / $apply – Dirty Checking • DI - Dependence Injection • $provider vs $factory vs $service
- 3. What is AngularJS • Javascript Front-end Framework (100% Javascript & 100% client side) • For building dynamic web apps. • Angular is what HTML would have been, had it been designed for applications. • HTML is a great declarative language for static documents. • But It does not contain much in the way of creating applications.
- 4. • It lets you use HTML as template language. • It lets you extend HTML’s syntax to express your application’s components clearly and succinctly. • Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write • MVC design parttern to organize codes.
- 8. Template
- 10. Directive • AngularJs is what HTML could have been if it had been designed for web application. • HTML is a markup language for describing web document.
- 11. Directive • A directive is a maker on a DOM element that tells Angular to run or reference some JS code to: – Attach a specified behaviors to that DOM. – Transform the DOM on the fly. <map id="map_canvas" x="46.8765" y="-3.32910"></map>
- 13. Expression • Allow you to insert dynamic values into your html. I am number {{0 + 1}} -> I am number 1 {{"hello" + " you"}} -> hello you {{“Hi," + user.name}} -> Hi, Tom
- 14. Modules • A module is a collection of services, directives, controllers, filters, and configuration information • Where we write pieces of our angular application. • Makes our code more maintainable, testable and readable.
- 15. Module
- 16. Controller • Controller is a JavaScript function. • Controller contains business logic behind the application to decorate the scope with functions and data. • The ngController directive specifies a Controller class.
- 17. Controller
- 19. Scope • scope is an object that refers to the application model. • Scope is the glue between application controller and the view. • Scope provide $watch to observe model mutations.
- 20. Controller Model
- 22. Out of scope
- 26. Angular Scope Inheritance • In AngularJS, a child scope normally prototypically inherits from its parent scope • Child scope: – scope of child controller – Child of $rootscope – New child scope is created by build-in directive (ng-repeat, ng-switch, ng-view and ng-include) • Isolate scope: no inherits from parent.
- 28. Hides/shadows property issue • Six data types that are primitives: – Boolean – Null – Undefined – Number – String – Symbol (new in ECMAScript 6) • Change a primitive value defined on the parent scope from inside the child scope.
- 29. childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
- 30. childScope.aString = 'child string' A new aString property is added to the childScope. -> This new property hides/shadows the parentScope property with the same name
- 31. childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
- 32. workarounds • If you really want/need to use a primitive, there are two workarounds: – Use $parent.parentScopeProperty in the child scope. This will prevent the child scope from creating its own property. – Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)
- 33. Data binding • Changes to the model are NOT automatically reflected in the view. • Any changes the view are NOT automatically reflected in the model. After the merge occurs:
- 34. Two way data binding 1. The template is compiled on the browser. 2. The compilation step produces a live view. 3. Any changes to the view are immediately reflected in the model, 4. and any changes in the model are propagated to the view.
- 35. $scope.$watch • When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally. • A watch means that AngularJS watches changes in the variable on the $scope object. • Watches are created using the $scope.$watch() • Each $watch be inserted into $watch list
- 36. $scope.$watch
- 37. $scope.$digest • Use to checks if there are any changes to all the variables watched by all the $scopes. • If a watched variable has changed, a corresponding listener function is called. • This listener function does what it need to do: • Example: changing an HTML text to reflect the new value of the watched variable. • => the $digest() function is what triggers the data binding to update.
- 38. $digest loop • Loop through $watch list and compare old vs new value: – Hey $watch, what is your value? • It is 9 – Alright, has it changed? • No, sir. – (nothing happens with this one, so it moves to the next) – You, what is your value? • It is Foo. – Has it changed? • Yes, it was Bar. – (good, we have a DOM to be updated) – This continues until every $watch has been checked. • When the $digest loop finishes, the DOM makes the changes. => Dirty Checking One more Time Baby!
- 39. Dirty checking • if the loop runs more than 10 times, it will throw an exception to prevent infinite loops
- 40. Dirty Checking
- 41. $scope.$apply • used to execute some code, and then call $scope.$digest() after that. • Called when an event is fire
- 43. When angular doesn’t use $apply for us • Native event that is not wrapped into $apply call. • Use directly jQuery.ajax() => Whenever possible, use AngularJS services instead of native
- 44. Using $watch for our own stuff • $watch(watchExpression, listener); -> $watch will only shallow check the referenced value by default. • $watch(watchExpression, listener, true); -> When deep-watching an object, angular will follow all references to other objects. -> May be results in an infinite loop. • $watchCollection(obj, listener); -> deep-watching array. • Dirty checking can be done with three strategies: By reference, by collection contents, and by value • ng-model does not do a deep watch
- 46. DI - Dependence Injection • Dependency injection means giving an object its instance variables. Really. That's it. • Instead of having it construct them itself. • Dependencies can be injected into objects by many means (such as constructor injection or setter injection)
- 47. DI in AngularJS
- 48. The Provider ($provide) • Injectable things - services • Services are defined by things called providers • Providers are created by $provide service. • The $provide service is responsible for telling Angular how to create new services.
- 49. Defining a provider • $provide. provider(name, provider); • $get : create a service – greeting service
- 50. Inject service • Angular will call the greeting provider's $get function in order to return a new instance of the service.
- 51. Service in AngularJS • Lazily instantiated – Angular only instantiates a service when an application component depends on it. • Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
- 52. $provide.factory • Short way to create Service. • AngularJS is calling the exact same code $provide.provider for us.
- 53. $provide.service • $provide. service(name, constructor)
- 54. Common way
- 55. Provider vs Factory vs Service 1. app.provider('c', fn); => new fn(); fn.$get() 2. app.factory('a', fn); => fn() { return obj } 3. app.service('b', fn); => new fn()
- 56. Config & Run phases angular.module('myModule', []) . config(function(injectables){ // provider / $provide and $injector // This is an example of config block. // You can have as many of these as you want. // You can only inject Providers (not instances) // into config blocks. }) . run(function(injectables) { // instance-injector // This is an example of a run block. // You can have as many of these as you want. // You can only inject instances (not Providers) into run blocks });
- 57. The Injector ($injector) • The injector is responsible for actually creating instances of our services using the code we provided via $provide $injector greetingProvider $httpProvider $routeProvider I need “greeting” service Create instance “greeting” service instance var greeting = $injector.get('greeting');
- 58. $injector • Each AngularJS application has a single $injector that gets created when the application first starts. • You can inject services into any function that is called with$injector.invoke. This includes: – controller definition functions – directive definition functions – filter definition functions – the $get methods of providers (aka the factory definition functions)
- 60. • Custom Directive. • AngularJS bootstrap life cycle.
Editor's Notes
- https://github.com/angular/angular.js/wiki/Understanding-Scopes http://jsfiddle.net/5qjLd/
- Example
- Example http://tech.small-improvements.com/2014/06/11/deep-watching-circular-data-structures-in-angular/
- http://www.jamesshore.com/Blog/Dependency-Injection-Demystified.html