Angularjs
Download as ODP, PDF•7 likes•2,105 views
Angular provides a framework for building client-side web applications. It enhances HTML with directives, data binding, and dependency injection to allow web applications to be developed with MVC architecture. The key concepts of Angular include directives, modules, scopes, and data binding which allow building dynamic views that update automatically based on changes to the underlying model/data.
Angularjs
- 1. HTML enhanced for web apps!HTML enhanced for web apps!
- 2. Back in time ... Websites instead of webapps Client seen as an interface All the workload handled by the server No client-side logic Javascript coder seen as web designer … when dinosaurs rule the Earth
- 3. Getting into the present day... AJAX – HTML5 – CSS3 Web 2.0 Client splitted from server Lots of new Javascript libraries Webapp
- 4. Javascript: the answer! Javascript frameworks MVC Architecture Big webapp No more comparison with web designers!
- 5. A current problem Too much time Too much code Too much stress Building client-side webapp is still hard DOM Manipulation Data validation
- 6. Angular for the life! Data-binding Basic templating directives Form validation Routing Reusable components Dependency injection Unit-testing
- 7. Bootstrap Load HTML DOM Load the module associated with the directive Create the application injector Compile the DOM treating the ng- app directive as the root of the compilation
- 8. Conceptual Overview 1. The browser loads the HTML and parses it into a DOM 2. The browser loads angular.js script 3. Angular waits for DOMContentLoaded event 4. Angular looks for ng-app directive, which designates the application boundary 5. The Module specified in ng-app (if any) is used to configure the $injector 6. The $injector is used to create the $compile service as well as $rootScope 7. The $compile service is used to compile the DOM and link it with $rootScope
- 9. HTML Compiler Compile: traverse the DOM and collect all of the directives. The result is a linking function. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth. Compiler is an angular service which traverses the DOM looking for attributes
- 10. Data-binding Also known as MVVM
- 11. Runtime 1. The browser's event-loop waits for an event to arrive. An event is a user interaction, timer event, or network event (response from a server) 2. The event's callback gets executed. This enters the JavaScript context. The callback can modify the DOM structure 3. Once the callback executes, the browser leaves the JavaScript context and re-renders the view based on DOM changes.
- 12. Runtime in detail 1. Enter Angular execution context by calling scope. $apply(stimulusFn) 2. Angular executes the stimulusFn(), which typically modifies application state 3. Angular enters the $digest loop. The loop is made up of two smaller loops which process $evalAsync queue and the $watch list. The $digest loop keeps iterating until the model stabilizes. 4. The $evalAsync queue is used to schedule work which needs to occur outside of current stack frame, but before the browser's view render 5. The $watch list is a set of expressions which may have changed since last iteration. If a change is detected then the $watch function is called which typically updates the DOM with the new value 7. Once the Angular $digest loop finishes the execution leaves the Angular and JavaScript context. This is followed by the browser re- rendering the DOM to reflect any changes
- 13. Scope & View The browser parses the HTML into the DOM, and the DOM becomes the input to the template engine known as the compiler. The compiler looks for directives which in turn set up watches on the model. The result is a continuously updating view which does not need template model re-merging. Your model becomes the single source- of-truth for your view. The scope is responsible for detecting changes to the model section and provides the execution context for expressions.
- 14. Directives & Filters A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion. <input type=”text” ng-model=”user.name” placeholder=”Foo”/> Filters perform data transformation. Typically they are used in conjunction with the locale to format the data in locale specific output. They follow the spirit of UNIX filters and use similar syntax | (pipe). <div>Negative number: {{val | number:2}}</div> <div>Your name (in lowercase): {{user.name | lowercase}}</div>
- 15. Modules & Injectors The injector is a service locator. There is a single injector per Angular application. The injector provides a way to look up an object instance by its name. The injector keeps an internal cache of all objects so that repeated calls to get the same object name result in the same instance. If the object does not exist, then the injector asks the instance factory to create a new instance. A module is a way to configure the injector's instance factory, known as a provider.
- 16. What's next? Forms i18n & l10n Modules Dependencies MVC E2E Testing Angular Services etc etc etc
- 17. The End