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