An introduction to the key patterns of angular test-driven development using testacular, services and directives.

1. handson

2. why angular?
keyarguments
2 - Way Binding
HTML JS
app.controller("SearchController", function($scope){
// Initially set the search term to hello
$scope.searchTerm = "Hello";
<div ng-controller="SearchController">
<input type="text" ng-model="searchTerm">
// Watch for changes of the search term
</div>
$scope.$watch("searchTerm", function(){
// perform search
});
});

3. why angular?
keyarguments
Directives
HTML
<thumbnail picture="pictures.find(2)"></thumbnail>
JS
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;
}
},
};
});

4. why angular?
keyarguments
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;
});
});

5. why angular?
keyarguments
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);
});
});

6. lets code!
handson

7. start using
projectrepository
https://github.com/southdesign/hands-on-angular
step by step
projectcommits
https://github.com/southdesign/hands-on-angular/commits/master

8. final project
galleryscreenshot

9. final project
sourcecode

10. we’re done!
thankyou
Thomas Fankhauser, M.Sc.
tommy@southdesign.de
try it out on: https://github.com/southdesign/hands-on-angular