Building single page applications with angular.js

Building single page applications with Angular.js Dieter De Mesmaeker

What is Angular Js?

Open source javascript framework

Single page applications

Created by Misko Hevery at Google

Heavy focus on testing

Augmented HTML

Introduction

Introduction

Introduction

Introduction

Introduction

MVC

Concepts

ControllersSet up the initial state of the $scope object

ControllersAdd behaviour to a $scope object

ControllersDo NOT use controllers for DOM manipulation or presentation logic! (use Directives instead)

Only business Logic!

Why? Testability!

$scopeRefers to the application model

Glues the controller with its view

$scope inheritance

$scope

$scope

$scopeWhy child scope for ng-repeat?

ServicesView independent business logic

ServicesView independent business logic

ServicesFactory creates a single instance

Everything that is dependent on the service gets a reference to that instance

(Think of it as a singleton)

DirectivesExtending HTML

DOM Manipulation

Directives

DirectivesMore useful example

Directives

Two-way data binding

src: http://www.slideshare.net/cloudvis/angularjs-framework

Two-way data binding

src: http://www.slideshare.net/cloudvis/angularjs-framework

Two-way data binding

Classical template systems Angular templates

Dependency Injection

Dependency Injection

$location service

Navigating in Angular

ng-Route

Bootstrapping the Application

Hands on

Yeoman

Grunt

Bower

Depends on Node.js

Hands on

Step 1: Install node

http://lmgtfy.com/?q=install+node

Step 2: Install Yeoman

npm install -g yo

Hands on

Install the angular-generator

https://github.com/yeoman/generator-angular