Hands on AngularJS
4 likes2,451 views
The document provides a hands-on tutorial on using Angular, focusing on key features like two-way data binding, directives, dependency injection, and testability. It includes code snippets for creating a search controller and a thumbnail directive, along with a link to a project repository for further exploration. The tutorial is aimed at helping users learn Angular step by step, with the final project available on GitHub.
Hands on AngularJS
- 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); }); });
- 7. start using projectrepository https://github.com/southdesign/hands-on-angular step by step projectcommits https://github.com/southdesign/hands-on-angular/commits/master
- 10. we’re done! thankyou Thomas Fankhauser, M.Sc. tommy@southdesign.de try it out on: https://github.com/southdesign/hands-on-angular