handsonhandson

handson

keyargumentswhy angular?

2 - Way Binding

<div ng-controller="SearchController"> <input type="text" ng-model="searchTerm"></div>

app.controller("SearchController", function($scope){

// Initially set the search term to hello $scope.searchTerm = "Hello"; // Watch for changes of the search term $scope.$watch("searchTerm", function(){ // perform search });});

HTML JS

handson

keyargumentswhy angular?

Directives

<thumbnail picture="pictures.find(2)"></thumbnail>

app.directive("thumbnail", function(){ return { restrict: 'E', scope:{ picture: '=' }, replace: true, template: "<div class='thumbnail' ng-click='toggle()'>" + "<img src='images/{{picture.url}}' alt='{{picture.name}}'></img>" + "</div>", controller: function($scope, element){ $scope.selected = false; $scope.toggle = function(){ $scope.selected = !$scope.selected; } }, };});

HTML

JS

handson

keyargumentswhy angular?

Dependency Injection

JS

app.controller("SearchController", function($scope, $http, ...){

// Use the $scope // Use whatever you need // Use $http $http.get("/search/" + $scope.searchTerm).success(function(data){

$scope.results = data; });

});

handson

keyargumentswhy angular?

Testability!

JS

describe("Pictures Service", function(){ var pictures; beforeEach(function(){ module("gallery"); module("galleryMock"); inject(function($injector){ pictures = $injector.get("pictures"); }); }); it("returns 4 default pictures", function(){ expect(pictures.all.length).toBe(4); });});

handsonhandson

lets code!

handson

projectrepositorystart using

https://github.com/southdesign/hands-on-angular

https://github.com/southdesign/hands-on-angular/commits/master

projectcommitsstep by step

handson

galleryscreenshotfinal project

handson

sourcecodefinal project

handsonthankyou

we’re done!

Thomas Fankhauser, M.Sc.tommy@southdesign.de

try it out on: https://github.com/southdesign/hands-on-angular