'Regular' HTTP

AJAX

Single Page application

Advantages

DisAdvantages

• Performance
• Cross platform development
• Better user experience
• Native look & feel
• Scaling

• Search engine optimization
• Client/Server code duplication
• Huge JavaScript Repos
• Code complexity

Single page applications

AngularJS

Superheroic

JavaScript

Framework

Lets get started!

Directives

A Directive is a marker on a HTML tag that tells Angular to run or reference some Javascript code

Built-in Directives

http://www.cheatography.com/proloser/cheat-sheets/angularjs/

Core

• ng-app
• ng-controller
• ng-include
• ng-repeat
• ng-switch
• ng-view

Display

• ng-class
• ng-cloak
• ng-hide
• ng-if
• ng-show
• ng-* ...

Event

• ng-change
• ng-checked
• ng-click
• ng-selected
• ng-submit
• ng-* ...

COMMUNITY DIRECTIVES

• angular-ui
  • ui-utils
  • ui-modules
  • ui-bootstrap
  • ng-grid
  • ui-router
• angular-leaflet 
• Restangular
• angular-Translate

Filters & Sorting

• currency
• date
• filter
• json
• limitTo
• lowercase
• number
• orderBy
• uppercase

Routing & Views

Validation

//css classes
.ng-valid {}
.ng-invalid {}
.ng-pristine {}
.ng-dirty {}
.ng-touched {}
.ng-untouched {}

Note that 'novalidate' is used to disable browser's native form validation.

ngModel.NgModelController

$error
$pending
$untouched
$touched
$pristine
$dirty
$valid
$invalid

Services

Services

Built-in Services

• $exceptionHandler
• $filter
• $http
• $interval
• $locale
• $get

• $animate
• $compile
• $q
• $location
• $log

start with '$'

Create your own

• service

• factory

• provider

Promises

Modules

describe('PhoneCat controllers', function() {

describe('PhoneListCtrl', function(){
  var scope, ctrl;

  beforeEach(module('phonecatApp'));

  beforeEach(inject(function($controller) {
    scope = {};
    ctrl = $controller('PhoneListCtrl', {$scope:scope});
  }));

  it('should create "phones" model with 3 phones', function() {
    expect(scope.phones.length).toBe(3);
  });


  it('should set the default value of orderProp model', function() {
    expect(scope.orderProp).toBe('age');
  });

  });
});

Extra Info

Alternatives

https://angularjs.org

Useful links

https://builtwith.angularjs.org

http://www.youtube.com/user/angularjs

http://andyshora.com/promises-angularjs-explained-as-cartoon.html

Why Angular?

• Structure in teamwork (module)
• Big community
• Powered by Google
• Tooling
• Data models are POJO
• Separation of concerns
• Write less code
• Testing