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

SERIOUSLY !!!

FORGET ....

AngularJS

Superheroic

JavaScript

Framework

MODEL-VIEW-WHATEVER

Where Whatever stands for

"whatever works for you"

Igor Minar

Overview

• Get started
• Scopes
• Controllers
• Lifecycle
• Built-in directives
• Filters & sorting
• Routing & Views
• Input Validation

• Service - Factory - Provider
• Promises
• Building Directives
• Testing
• Enterprise Structure

Lets get started!

Digest Cycle

Controllers

Scopes

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

custom Directives

Get ready to feel lost

DIRECTIVES

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

4 four methods for invoking a directive

//As an attribute:
<span my-directive></span>

//As a class:
<span class="my-directive: expression;"></span>

//As an element:
<my-directive></my-directive>

//As a comment:
<!-- directive: my-directive expression -->

Let's build our own!

Restrict option

'A' - <span ng-shizzle></span>
'E' - <ng-shizzle></ng-shizzle>
'C' - <span class="ng-shizzle"></span>
'M' - <!-- directive: ng-shizzle -->

Note: You can specify multiple

restrict: 'EA'

REQUIRE option

^ -- Look for the controller on parent elements, not just on the local scope
? -- Don't raise an error if the controller isn't found

scope

@ -- Used to pass a string value into the directive
= -- Used to create a two-way binding to an object that is passed into the directive
& -- Allows an external function to be passed into the directive and invoked

Transclusion

Inclusion of a document or part of a document into another document by reference

Transclusion

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