ANGULARJSLuka Zakrajšek@bancekFirst JavaScript meetup in LjubljanaApril 30, 2013
HIIm LukaIn web development for more than 7 yearsI work at Koofr
JAVASCRIPT APPSDONT HAVE TO BE MESSY
ANGULARS PHILOSOPHYDecouple DOM manipulation from app logicCode reusageMake common tasks trivial anddifficult tasks possib...
MODULESSplit your application into multiple filesNo global namespace manipulationDoesnt limit you with files structure
$SCOPEOne $rootScopeEvery controller gets its own scopeand inherits data from parent controllerEvery directive gets new $s...
DATA BINDINGJS:$scope.comment.user = AuthorHTML:{{ comment.user }}
URL ROUTING.config([$routeProvider, function($routeProvider) {$routeProvider.when(/home, {templateUrl: partials/home.html,...
CONTROLLERS.controller(CommentsController, function($scope, Comment) {Comment.query(function(res) {res.reverse();$scope.co...
MODELS.factory(Comment, function($resource) {return $resource(/app/api/comments.json);})
FILTERS.filter(gravatar, function() {return function(email, size) {var hash = $().crypt({method: md5,source: email});retur...
DIRECTIVES.directive(hasFocus, function($timeout) {return function(scope, elm, attrs) {scope.$watch(attrs.hasFocus, functi...
DIRECTIVES.directive(debug, function() {return {restrict: E,scope: {data: =,title: @,},templateUrl: partials/debug.html,co...
DIRECTIVESdebug.htmlUsage:<h4>{{ title }}:</h4><pre>{{ data | cleanData | json }}</pre><debug data="user" title="User"></d...
TESTINGUnit testingEnd to end testingit(should reverse greeting, function() {expect(binding(greeting|reverse)).toEqual(oll...
DEMOSample applicationSome codeChrome pluginCode available on Github:https://github.com/bancek/angularjs-talk
Upcoming SlideShare
Loading in …5
×

AngularJS

3,906 views

Published on

Published in: Technology, Design

AngularJS

  1. 1. ANGULARJSLuka Zakrajšek@bancekFirst JavaScript meetup in LjubljanaApril 30, 2013
  2. 2. HIIm LukaIn web development for more than 7 yearsI work at Koofr
  3. 3. JAVASCRIPT APPSDONT HAVE TO BE MESSY
  4. 4. ANGULARS PHILOSOPHYDecouple DOM manipulation from app logicCode reusageMake common tasks trivial anddifficult tasks possibleNot a library
  5. 5. MODULESSplit your application into multiple filesNo global namespace manipulationDoesnt limit you with files structure
  6. 6. $SCOPEOne $rootScopeEvery controller gets its own scopeand inherits data from parent controllerEvery directive gets new $scopethat is isolated from others
  7. 7. DATA BINDINGJS:$scope.comment.user = AuthorHTML:{{ comment.user }}
  8. 8. URL ROUTING.config([$routeProvider, function($routeProvider) {$routeProvider.when(/home, {templateUrl: partials/home.html,controller: HomeController});$routeProvider.when(/comments, {templateUrl: partials/comments.html,controller: CommentsController});$routeProvider.otherwise({redirectTo: /home});}]);
  9. 9. CONTROLLERS.controller(CommentsController, function($scope, Comment) {Comment.query(function(res) {res.reverse();$scope.comments = res;});$scope.post = function(){$scope.comments.unshift({name: $scope.user.name,email: $scope.user.email,content: $scope.comment});$scope.comment = ;}})
  10. 10. MODELS.factory(Comment, function($resource) {return $resource(/app/api/comments.json);})
  11. 11. FILTERS.filter(gravatar, function() {return function(email, size) {var hash = $().crypt({method: md5,source: email});return "http://secure.gravatar.com/avatar/" + hash + ".jpg?s="+ size + "&d=identicon";};})
  12. 12. DIRECTIVES.directive(hasFocus, function($timeout) {return function(scope, elm, attrs) {scope.$watch(attrs.hasFocus, function(value) {if (value) {$timeout(function(){elm.focus();}, 0);}});};})
  13. 13. DIRECTIVES.directive(debug, function() {return {restrict: E,scope: {data: =,title: @,},templateUrl: partials/debug.html,controller: function($scope, $element) {}};})
  14. 14. DIRECTIVESdebug.htmlUsage:<h4>{{ title }}:</h4><pre>{{ data | cleanData | json }}</pre><debug data="user" title="User"></debug>
  15. 15. TESTINGUnit testingEnd to end testingit(should reverse greeting, function() {expect(binding(greeting|reverse)).toEqual(olleh);input(greeting).enter(ABC);expect(binding(greeting|reverse)).toEqual(CBA);});
  16. 16. DEMOSample applicationSome codeChrome pluginCode available on Github:https://github.com/bancek/angularjs-talk

×