• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hands on AngularJS
 

Hands on AngularJS

on

  • 1,880 views

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

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

Statistics

Views

Total Views
1,880
Views on SlideShare
1,792
Embed Views
88

Actions

Likes
4
Downloads
42
Comments
0

2 Embeds 88

http://southdesign.de 84
http://localhost 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Hands on AngularJS Hands on AngularJS Presentation Transcript

  • handson
  • 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 }); });
  • 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; } }, };});
  • 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; });});
  • 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); });});
  • lets code!handson
  • start using projectrepository https://github.com/southdesign/hands-on-angular step by step projectcommitshttps://github.com/southdesign/hands-on-angular/commits/master
  • final projectgalleryscreenshot
  • final projectsourcecode
  • we’re done! thankyou Thomas Fankhauser, M.Sc. tommy@southdesign.detry it out on: https://github.com/southdesign/hands-on-angular