Your SlideShare is downloading. ×

Angular js 24 april 2013 amsterdamjs

771

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
771
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
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. AngularJsAmasterdamJs 24 April 2013
  • 2. Who am I?● Marcin Wosinek● 5 years IT experience- WebDev: Javascript- C# dev: UnitTests● Currently js contractor in Poznan, Poland
  • 3. jQuery
  • 4. You?
  • 5. Topic
  • 6. New reality
  • 7. Traditional web architectureServerClienthtml +datarequest
  • 8. Application approachServerClientjstemplateRESTdata
  • 9. Communication with backend{"firstName": "John","lastName": "Smith","age": 25,"address": {"streetAddress": "21 2nd Street","city": "New York","state": "NY","postalCode": 10021}}
  • 10. Changes
  • 11. Challenges - testabilityfunction PasswordCtrl() {var msg = $(.ex1 span);var input = $(.ex1 input);var strength;this.grade = function() {msg.removeClass(strength);var pwd = input.val();password.text(pwd);if (pwd.length > 8) {strength = strong;}else {strength = weak;}msg.addClass(strength).text(strength);
  • 12. Challenges - boilerplateinitialize: function () {this.allCheckbox = this.$(#toggle-all)[0];this.$input = this.$(#new-todo);this.$footer = this.$(#footer);this.$main = this.$(#main);this.listenTo(app.Todos ,add,this.addOne);this.listenTo(app.Todos, reset, this.addAll);this.listenTo(app.Todos, change:completed, this.filterOne);this.listenTo(app.Todos, filter, this.filterAll);this.listenTo(app.Todos, all, this.render);app.Todos.fetch();}
  • 13. AngularJs
  • 14. MV* ArchitectureViewModelView ModelShared with backend$scopeAngular htmlAngularJs coreController
  • 15. View<ul><li ng-repeat="todo in todos"><span></span></li></ul><form ng-submit="addTodo()"><input ng-model="todoText" /><input type="submit" value="add" /></form>
  • 16. Filters<ul><li ng-repeat="project in projects |filter:search | orderBy:name"><a href=""></a>:</li></ul>
  • 17. Controller
  • 18. $scopepresentation
  • 19. Plain JS objects// Backboneapp.Todo = Backbone.Model.extend({defaults: {title: ,completed: false }});// EmberTodos.Todo = DS.Model.extend({title: DS.attr(string),isCompleted: DS.attr(boolean) });// Angulartodos.push({title: $scope.newTodo,completed: false });
  • 20. Two ways binding
  • 21. Web form supportpresentation<!-- Html updated by angular --><form name="exampleForm" class="ng-pristine ng-invalidng-invalid-required">Required field:<input ng-model="required" required="" class="ng-pristineng-invalid ng-invalid-required"></label> <br>Email field:<input ng-model="email" type="email" class="ng-pristineng-valid ng-valid-email"></label> <br><button ng-disabled="!exampleForm.$valid"disabled="disabled">Submit</button></form>
  • 22. Dependency injectionfunction HelloCtrl($scope, $window, $log) {$scope.message = Display me in view;$window.alert(Use window via $window service - thatimproves testability);$log.log(We can even test console log calls - thats to$log wrapper);}
  • 23. Services// Services that persists and retrieves ToDos from// localStoragetodomvc.factory(todoStorage, function () {var STORAGE_ID = todos-angularjs;return {get: function () {return JSON.parse(localStorage.getItem(STORAGE_ID) || []);},put: function (todos) {localStorage.setItem(STORAGE_ID, JSON.stringify(todos));}};});
  • 24. Routing - $routeProviderangular.module(phonecat, []).config([$routeProvider,function($routeProvider, $locationProvider) {// $locationProvider.html5Mode(true);$routeProvider.when(/phones, {templateUrl: partials/phone-list.html,controller: PhoneListCtrl}).when(/phones/:phoneId, {templateUrl: partials/phone-detail.html,controller: PhoneDetailCtrl}).otherwise({redirectTo: /phones});}]);
  • 25. REST - $resourcemyApp.factory(ProductService, function($resource) {var ProductResource = $resource(/product/:productId), ProductService = {};ProductService.getItem = function (index) {return ProductResource.get({productId: index});}ProductService.addItem = function (item) {ProductResource.save({}, item));}return ProductService;});function ProductCtrl($scope, ProductService) {// Take products form ProductService and put it on$scope}
  • 26. Directives<ANY class="ng-show: {expression};"><ANY ng-show="{expression}"><ANY class="ng-hide: {expression};"><ANY ng-hide="{expression}"><ng-view> <any ng-view><ANY ng-class="{expression}"> <ANY class="ng-class:{expression};"><ANY ng-switch="expression"><ANY ng-switch-when="matchValue1">...</ANY><ANY ng-switch-when="matchValue2">...</ANY>...<ANY ng-switch-default>...</ANY></ANY>
  • 27. Yeoman
  • 28. Karma (Testacular)
  • 29. HabitsWriting callbacks
  • 30. HabitsImperative binding
  • 31. HabitsChanging DOM incontroller
  • 32. Gotchas - writing directivesangular.module(blink, []).directive(blink, function() {return {restrict: E,link: function(scope, elm, attr) {setInterval(function() {elm.toggle();}, parseInt(attr.interval, 10) || 1000);}};});
  • 33. Gotchas - ng-model in ng-repeat// Gotcha!<ul><li ng-repeat="item in list"><input ng-model="item" /></li></ul>// Work as expected<ul><li ng-repeat="item in list"><input ng-model="item.name" /></li></ul>
  • 34. Gotchas - code minificationsyngularApp.controller(ProductCtrl, function($scope,ProductApi) {// easy but minification unfriendly});syngularApp.controller(ProductCtrl, [$scope,ProductApi, function($scope, ProductApi) {// minification resistant}]);
  • 35. Gotchas -$resource
  • 36. Gotchas - filters working only on arraysfilterorderBy
  • 37. Gotchas -e2e?
  • 38. Gotchas - updating data fromoutside angular$digest$apply
  • 39. Gotchas - $ in service names$
  • 40. Questions?
  • 41. Learning materials● http://angularjs.org/● http://egghead.io/● http://www.youtube.com/user/angularjs
  • 42. Summary
  • 43. Contact● marcin.wosinek@gmail.com● @MarcinWosinek● links, slides, notes and (hopefully) video:http://bit.ly/AngularJs-AmsterdamJS
  • 44. Credits● Audience photo: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream● BackboneJs logo: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.● Two ways binding: http://docs.angularjs.org/guide/dev_guide.templates.databinding● http://karma-runner.github.io/0.8/index.html● http://yeoman.io/

×