AngularJS Introduction (Talk given on Aug 5 2013)
Download as PPTX, PDF2 likes2,820 views
This document provides an introduction and overview of AngularJS, including: - The main components of Angular apps like modules, models, controllers, templates, directives, services, filters and routes. - How Angular handles data binding, dependency injection and promises. - Testing Angular apps with tools like Karma, Jasmine and Batarang. - Best practices for Angular development and organizing code.
![Module
O Angular apps have nothing like a main
method
O Directive ng-app used to bootstrap the
module
O E.g. <html ng-app=“someModule”>
O A module can contain several other
components
O var module =
angular.module(„someModule‟, [])
O Second argument is an array of other
modules which are requisites for the current
module.](https://image.slidesharecdn.com/angularjsfinal-130806093120-phpapp01/85/AngularJS-Introduction-Talk-given-on-Aug-5-2013-7-320.jpg)
AngularJS Introduction (Talk given on Aug 5 2013)
- 1. AngularJS A better way to create web apps
- 2. Agenda O Introduction to AngularJS O Some concepts used in AngularJS O Testing application built with Angular O Productivity and debugging tools O Code organization for large projects O Code demo as we go on
- 3. Why AngularJS O HTML was created to transmit markup data on web. E.g. <b> tags for making text bold etc. O JavaScript added for interactivity. O And then comes AJAX and rich web apps. O And things get messed up by adding listeners after getting ids, callbacks and series of callbacks.
- 4. What can AngularJS do O Less boilerplate code, faster development with less code and thus less tests and bugs. O Clean separation of DOM manipulation, business logic and views make things easier to test. O Declarative UI design means designers can focus on their work without even knowing JavaScript. O Support for cool stuff like promises.
- 5. Angular components This is the real stuff
- 6. Angular App Modules Models Controllers Templates (and Views) Directives Services Filters Routes
- 7. Module O Angular apps have nothing like a main method O Directive ng-app used to bootstrap the module O E.g. <html ng-app=“someModule”> O A module can contain several other components O var module = angular.module(„someModule‟, []) O Second argument is an array of other modules which are requisites for the current module.
- 8. Models O In Angular, model is any data that is reachable as property of $scope object O Can also create models inside templates using the ng-model directive e.g. <input type=“email” ng-model=“user.email”> O Can watch models for changes using $watch(watchFn, watchAction, deepWatch) O deepWatch is a boolean which allows to watch attributes of the object returned by watchFn
- 9. Controllers O Set up the $scope O Add behavior to $scope O All business logic to be written in here. O Can use the one controller per template to create really traditional websites.
- 10. Templates O Specify how things should show up and what happens on particular user actions. O Angular templates are not the view in MVC. Compiled angular templates are the views. O Declaratively create the UI using directives.
- 11. Directives O One of the most important part of Angular O Allows you to extend HTML to define custom tags, attributes and classes for UI components. Jquery UI Angular Directives <div id=“tabs”> <ul> <li><a href=“#tabs-1”> Tab1</a></li> <li><a href=“#tabs-2”> Tab2</a></li> </ul> <div id=“#tabs-1>Content</div> <div id=“#tabs-2>Content2</div> </div> <script> $(function() { $(„#tabs”).tabs(); }); </script> <tab-set> <tab title=“Tab1”>Content</tab> <tab title=“Tab2”>Content2</tab> </tab-set> Now what if you need tabs on 10 pages in your whole application ?
- 12. Services O Stuff required at various places e.g. by various controllers. O E.g. a http request to get list of blog posts in a blogging application would be required while showing all blog posts, in the admin edit/publish view etc. O Three different ways to create services i.e. services, factory and provider.
- 13. Filters O Filters are transformations applies to objects O Not important to logic used to process models e.g. currency sign (like $) O E.g. lowerCase, sort etc. O Built-in filters like json O Custom filters can be defined with app.filter(„filterName‟, function (obj) {})
- 14. Routes O Used to map templates and associated controller to URLs. O Supports HTML5 mode where you get history support. O That‟s it !
- 15. Form Validation O Provides special support for two properties $valid, $invalid. O Can use them like <button ng- disabled=“!formName.$valid”> to disable a form until its all elements are correct. O polyfills for things like „required‟ on non- HTML browsers
- 16. Server-side communication O $http wraps the XHR to provide asynchronous requests. O $resource for interacting with RESTful resources. (provided as a separate module in angular-resource.js) O $http requests support promises (talk about this later)
- 17. Secrets of all the magic in Angular
- 18. What actually happens O Template loads with all the angular directives O Angular script loads and after template loading finishes, it looks for ng-app to find application boundaries. O Compile phase – Angular walks the DOM to identify registered directive and transforms them. O Link Phase – This runs a link function for each directive which typically creates listeners on DOM or model and keeps view and model in sync .
- 19. $scope O $scope allows binding and communication between controller and templates. O All the model objects are stored on it. O Makes sense not to store everything on it as it would degrade performance.
- 20. Data binding O Binding two sources together and keep then updated of changes. O Angular supports two-way data binding. O Change in models get reflected everywhere in view. O Changes in view gets reflected in the model.
- 21. Dependency Injection O Follows Law of Demeter or principle of least knowledge. O Instead of creating things, just ask for what is required. O E.g. to create a Car you need an engine so instead of calling an engine Factory in the constructor, pass an engine as parameter. O Makes things easier to test (e.g. mock $http), less code and easier to change later.
- 22. Promises O A promise is an interface that deals with objects that are returned or get filled in at a future point in time. O Current approach with callbacks has problems of indentation while chaining multiple calls, losing errors reported between callbacks unless manually handled and doing real stuff in innermost callback.
- 23. Promises O In angular a promise gives with a then function which takes two functions as a parameter for promises getting resolved (success) or rejected (failure) O A promise can be – O chained so you do not get code with callbacks inside callbacks that flows out of the screen. O errors propagate and can be handled at the end. O Assurance that previous call finishes before next call.
- 24. Testing apps built with Angular
- 25. Why Test ? O Things do what they are expected to do. O Future addition of code does not affect previous features. O Reduces effort in the long run but maybe pain to write initially.
- 26. Unit tests in Angular O Test stuffs like controllers, filters, services and directives. O Separation of DOM code makes testing easier and possible. O Using Jasmine like syntax and Jasmine Spy instead of real browser.
- 27. Karma O Karma is a test runner in JavaScript O Test on real devices O Control the whole workflow from command line. O Lightening fast !!
- 28. Scenario tests O End to end tests involving complete feature. O E.g. first page of a blog should display N blog posts. O Done using Karma in Angular
- 30. Yeoman m/ O Lightning-fast scaffolding O Built-in preview server O Integrated package management O An awesome build process O Unit testing using PhantomJS
- 31. Batarang O Chrome extension for angular O Provides performance metrics, see scopes and values of properties in them. O Can change the values and see the change in realtime.
- 32. IDE plugins O Webstorm plugin is awesome. O Sublime text angular plugin.
- 33. Angular Future O Animations O Breaking down into components O alternative syntax work without the $scope thing but not really useful. O Much More…
- 34. Best practices Because you can still write yucky code in Angular
- 35. No DOM manipulation in controller
- 36. Things which are to be used in multiple controllers ? Use services
- 37. To wrap third party plugins like JQuery date-picker, use directives
- 38. Write tests. This one is for me
- 39. Use promises, they are awesome.
- 40. Code organization O Angular seed style O Yeoman Style O Any style you prefer
- 41. Learn more about it O Angular Channel on Youtube O http://www.yearofmoo.com O egghead.io O Stack Overflow O Quora
Editor's Notes
- #14: Angular comes with several filters, like currency, which we’ve seen:{{12.9 | currency}}This bit of code will display the following:$12.90We put this declaration in the view (rather than in the controller or model) because thedollar sign in front of the number is only important to humans, and not to the logic weuse to process the number.varhomeModule = angular.module('HomeModule', []);homeModule.filter('titleCase', function() {vartitleCaseFilter = function(input) {varwords = input.split(' ');for (vari = 0; i < words.length; i++) {words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);}return words.join(' ');};return titleCaseFilter;});
- #19: Script loadsAngular loads and looks for the ng-app directive to find the application boundaries.Compile phaseIn this phase, Angular walks the DOM to identify all the registered directives in thetemplate. For each directive, it then transforms the DOM based on the directive’srules (template, replace, transclude, and so on), and calls the compile functionif it exists. The result is a compiled template function, which will invoke the linkfunctions collected from all of the directives.Link phaseTo make the view dynamic, Angular then runs a link function for each directive.The link functions typically creates listeners on the DOM or the model. Theselisteners keep the view and the model in sync at all times. …. functions deal with transforming the template itself, and link functions deal with makinga dynamic connection between model and view. It is in this second phase that scopesare attached to the compiled link functions, and the directive becomes live throughdata binding. These two phases are separate for performance reasons. Compile functions execute onlyonce in the compile phase, whereas link functions are executed many times, once foreach instance of the directive. For example, let’s say you use ng-repeat over your directive.You don’t want to call compile, which causes a DOM-walk on each ngrepeatiteration. Instead, you want to compile once, then link.