Hands on AngularJS

1,802
-1

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,802
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Hands on AngularJS

  1. 1. handson
  2. 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. 3. why angular? keyarguments Directives HTML <thumbnail picture="pictures.find(2)"></thumbnail> JSapp.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. 4. why angular? keyarguments Dependency Injection JSapp.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. 5. why angular? keyarguments Testability! JSdescribe("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. 6. lets code!handson
  7. 7. start using projectrepository https://github.com/southdesign/hands-on-angular step by step projectcommitshttps://github.com/southdesign/hands-on-angular/commits/master
  8. 8. final projectgalleryscreenshot
  9. 9. final projectsourcecode
  10. 10. we’re done! thankyou Thomas Fankhauser, M.Sc. tommy@southdesign.detry it out on: https://github.com/southdesign/hands-on-angular
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×