Your SlideShare is downloading. ×
Hands on AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hands on AngularJS

1,543

Published on

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.

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×