Date post: | 06-May-2015 |
Category: |
Engineering |
Upload: | david-xi-peng-yang |
View: | 157 times |
Download: | 1 times |
An Introduction to Angular JS
AgendaOverview of Angular framework
Discuss the basic core features and functionality
Develop a demo web application
What is Angular JShttps://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
Single Page Application
Reduce page reloading round trip
On-demand loading resources
Talks to API for data
SEO challenges
Application require more interactivityAutomatic refresh (notifications)
More Animations
Fast editing
More speed
Thick Server, Thin Client
Client Side • DOM Manipulation • Javascript• JQuery
Server Side • Routing• View Layer• Application Logic• Persistence
• ASP.NET• PHP• Ruby• JSP• XML
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
The Rise of JavaScript Libraries
Why AngularJSSeparation 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
DirectiveIndex.html
<div ng-controller="Controller">
<div my-customer></div>
</div>
Scirpt.js.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
Bootstrap
Digest cycle and $watch list
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