Angular js presentation at Datacom

Angular js presentation at Datacom

• 1.
  An Introduction toAngular JS
• 2.
  Agenda  Overview ofAngular framework  Discuss the basic core features and functionality  Develop a demo web application
• 3.
  What is AngularJS 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.
  Single Page Application Reduce page reloading round trip  On-demand loading resources  Talks to API for data  SEO challenges
• 5.
  Application require more interactivity Automatic refresh (notifications)  More Animations  Fast editing  More speed
• 6.
  Thick Server, ThinClient Client Side • DOM Manipulation • Javascript • JQuery Server Side • Routing • View Layer • Application Logic • Persistence • ASP.NET • PHP • Ruby • JSP • XML
• 7.
  Thin Server, ThickClient Client Side • DOM Manipulation • Animation • Routing • View layer • Application Logic • Angular JS • Backbone • Ember • Knockout • Require JS Server Side • Persistence • Node JS • REST
• 8.
  The Rise ofJavaScript Libraries
• 9.
  Why AngularJS  Separationof 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.
  Directive  Index.html <div ng-controller="Controller"> <divmy-customer></div> </div>  Scirpt.js .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' };
• 11.
  Bootstrap
• 12.
  Digest cycle and$watch list
• 13.
  Demo – workflow  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