Angular js presentation at Datacom

640 views
360 views

Published on

Published in: Engineering, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
640
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Need wifi connection
  • 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

    ×