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 presentation at Datacom

769 views

Published on

Published in: Engineering, Technology, Education
  • Be the first to comment

  • Be the first to like this

Angular js presentation at Datacom

  1. 1. An Introduction to Angular JS
  2. 2. Agenda  Overview of Angular framework  Discuss the basic core features and functionality  Develop a demo web application
  3. 3. What is Angular JS https://angularjs.org/  Angular JS is JavaScript framework for building rich web application based on the power of JavaScript, CSS and HTML5 in modern browsers.  Open Source (@ github)  Funded by Google  Cross Platform
  4. 4. Single Page Application  Reduce page reloading round trip  On-demand loading resources  Talks to API for data  SEO challenges
  5. 5. Application require more interactivity  Automatic refresh (notifications)  More Animations  Fast editing  More speed
  6. 6. Thick Server, Thin Client Client Side • DOM Manipulation • Javascript • JQuery Server Side • Routing • View Layer • Application Logic • Persistence • ASP.NET • PHP • Ruby • JSP • XML
  7. 7. Thin Server, Thick Client Client Side • DOM Manipulation • Animation • Routing • View layer • Application Logic • Angular JS • Backbone • Ember • Knockout • Require JS Server Side • Persistence • Node JS • REST
  8. 8. The Rise of JavaScript Libraries
  9. 9. Why AngularJS  Separation of concerns  Dependency Injection  Two way binding  Lots of built-in and open source directives  Routing support  Built with testability in mind  Filters and events
  10. 10. Directive  Index.html <div ng-controller="Controller"> <div my-customer></div> </div>  Scirpt.js .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' };
  11. 11. Bootstrap
  12. 12. Digest cycle and $watch list
  13. 13. Demo – work flow  NPM  Install core tools  Yeoman  Create a new webapp  Bower  Handle dependencies  Grunt  Preview, test, build  Demo App  URL: http://wordpress.com/fresh/  API: https://public-api.wordpress.com/rest/v1/freshly- pressed?number=20&fields=editorial

×