1. An Introduction to Angular JS

2. Agenda
 Overview of Angular framework
 Discuss the basic core features and functionality
 Develop a demo web application

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. 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, Thin Client
Client Side • DOM Manipulation • Javascript
• JQuery
Server Side • Routing
• View Layer
• Application Logic
• Persistence
• ASP.NET
• PHP
• Ruby
• JSP
• XML

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. The Rise of JavaScript Libraries

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. 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. Bootstrap

12. Digest cycle and $watch list

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