AngularJsCHRISTOFFER NORING

INTRODUCTION

What is AngularJs? - Super heroic Javascript MVW Framework,

Model View Whatever

- SPA, single page application

- Brings MVC capbability to javascript making it easier to test

- Angular deemphasizes DOM manipulation

- Angular is Test focused, support for unit

testing, ui testing mocking etc..

DOM manipulation (move, create, replace, etc)

Augmenting – add functionality to existing DOM

“DOM manip-way”<div> <span>content</span> <span>new element</span></div>

“Angular-way”<div ng-app> <span ng-model=“name”></span></div>

Why should you care? AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons (google)

Started out as a business but went on to be open source framework, currently stable release at 1.2

AngularJs

Knockout

Angular learning curve

UI

Middle

Backend

Writing directives

Services, DI

Ui directives, routing etc

$http

Testing

The presentation

Killer featuresData binding

Routing

Dependency Injection

Testing, unit and e2e, Mocking

and

Directives, aka User Controls

Ajax encapsulation, REST support

Filters

…

model

Angular MVW Controller Decorates scope with primitives,

objects and callbacks. Responsible for

constructing a model

Scope detect changes to model objects and

create an execution context for expressions

View

uses scope

view

controller

scope

Decorates

Binds

Worlds smallest app<script src="”angular.js”"></script>

<div ng-app>

{{ 1+2 }}

</div>

Include angular script

Create an angular application

Expression

Demo – building an app ng-app

ng-model

ng-controller

ng-repeat

Filtering

Routing (enter app.js)

Useful directives

creates the app

creates a 2-way binding

points out a controller with its own scope

repeats data

renders a css class given a boolean expression ex

determines whether an element should be visible

ng-app

ng-model

ng-controller

ng-repeat

ng-class

ng-show

<input type="text" ng-model="name" />

<div ng-controller="userController"></div>

<ul><li ng-repeat="item" in items">{{item}}</li></ul>

list.length > 0 ? "show": "hide"

<div ng-show=”hasErrors”>{{errorMessage}}</div>

Dependency injection

Minification safe,strings are left intact

Injection just works, no hassle

var app = modules("myApp");app.controller("MyController", ["$scope", "userService",function($scope,userService){ $scope.user = userService.getUser();}]);

var app = modules("myApp");app.controller("MyController", function($scope,userService){ $scope.user = userService.getUser();});

Variables are minified to exa,b

Angular cant find it!

But, enter minification

Demo Dependency injection Bootstrapping

Creating a service

Inject a service

Demo Testing Karma,

Jasmine

What can I test?

Demo of karma and different tests, mocking

Karma Coverage

Backend - $http

$http({ method: "GET", url: "/Users" })

.success(successCallback)

.error(errorCallback);

$http.get(url).success(successCallback);$http.post(url, data, config).success(successCallback)$http.put(url, data, config);$http.delete(url, config);$http.jsonp(url, config);

Shortcut methods

Returns a promise

Configuration object

interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or

may not be finished at any given point in time

Backend demo Demo with call to visual studio controller, get and post

Directives – user controls

Directive logic

<my-directive attr=”boundProperty” >hi there</my-directive>

Hi there Charlie

Directive logic

<my-directive attr=”boundProperty” />

Directives demo Basics

Demo of ChartJs + other directives

E2e testing demo

Organizing your code - templates

UI- bootstrap Is a subset of bootstrap especially adjusted to fit AngularJs

http://angular-ui.github.io/bootstrap/

And many more…

Further reading

http://docs.angularjs.org/api

https://github.com/angular/angular-seed

https://github.com/softchris/angulartemplate

http://egghead.io/

http://www.pluralsight.com

www.google.com

Shameless self promotion

Google is your friend

www.ng-newsletter.com

Questions?