Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Try AngularJS

1,054 views

Published on

A project based introduction to AngularJS.
TryIT 2014

Published in: Technology
  • Be the first to comment

Try AngularJS

  1. 1. Carlos Hernando @chernando
  2. 2. Javascript
  3. 3. AngularJS
  4. 4. Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
  5. 5. AngularJS at a glance
  6. 6. View
  7. 7. Bootstrap <!doctype html>! <html>! <body>! <script src="angular.js"></script>! </body>! </html> /app/index.html
  8. 8. Directives <!doctype html>! <html>! <body ng-app>! ! <input type="text" ng-model="name">! ! <script src="angular.js"></script>! </body>! </html> /app/index.html
  9. 9. Data binding <!doctype html>! <html>! <body ng-app>! <input type="text" ng-model="name">! ! <p>Hello {{ name }}</p>! ! <script src="angular.js"></script>! </body>! </html> /app/index.html
  10. 10. step 0
  11. 11. Application Structure 'use strict';! ! angular.module('tryitApp', []); /app/scripts/app.js
  12. 12. Directives <body ng-app="tryitApp"! ng-init="talks = [! {! 'id': 1,! 'title': 'Acto de Apertura',! 'author': '(Por confirmar)',! 'starts': '2014-03-17T10:00:00+0100',! 'ends': '2014-03-17T11:00:00+0100',! 'description': ''! },! …! ]"> /app/index.html
  13. 13. ng-repeat <div ng-repeat="talk in talks">! <h2>{{ talk.title }}</h2>! ! <p class="meta">! {{ talk.starts }}! {{ talk.author }}! </p>! ! <p class="description">! {{ talk.description }}! </p>! </div> /app/index.html
  14. 14. Filters <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author | uppercase}}! </p>! ! /app/index.html
  15. 15. ng-repeat & filters <input type="text" ng-model="filterText">! ! <div ng-repeat="talk in talks | ! filter:filterText |! orderBy:'starts'">! ! <h2>{{ talk.title }}</h2>! <p class="meta">! …! </p>! <p class="description">! …! </p>! </div> /app/index.html
  16. 16. Directives & Data-binding <p class="description">! <img class="pull-left"! width="160"! height="160"! ! ng-src="images/{{ talk.image || 'robot.png' }}">! ! {{ talk.description }}! </p> /app/index.html
  17. 17. step 1
  18. 18. No JavaScript
  19. 19. Controllers & Services
  20. 20. Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];! }! );! /app/scripts/controllers/schedule.js
  21. 21. $scope
  22. 22. Controllers & Views <body ng-app="tryitApp">! ! <div class="container"! ng-controller="ScheduleCtrl">! ! <div ng-repeat="talk in talks …">! <h2>{{ talk.title }}</h2>! …! </div> /app/index.html
  23. 23. Service: Talks angular.module('tryitApp')! .service('Talks', function Talks() {! var talks = [! {! 'id': 1,! 'title': 'Acto de Apertura',! 'starts': new Date('2012-03-17T10:00:00+0100'),! …! }, …! ];! ! this.query = function () {! return talks;! };! }); /app/scripts/services/talks.js
  24. 24. Dependency Injection angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! ); /app/scripts/controllers/schedule.js
  25. 25. step 2
  26. 26. Testing
  27. 27. Service: Favorites angular.module('tryitApp')! .factory('Favorites', function ($log) {! var favorites = [];! ! function addTalk(talk) {! …! }! ! function isIn(talk) {! …! }! ! return {! addTalk: addTalk,! isIn: isIn,! talks: function() {! return favorites;! },! };! });! /app/scripts/controllers/schedule.js
  28. 28. Test: Favorites describe('Service: Favorites', function () {! ! beforeEach(module('tryitApp'));! ! var Favorites,! talk1 = { id: 1 },! talk2 = { id: 2 };! ! beforeEach(inject(function (_Favorites_) {! Favorites = _Favorites_;! }));! ! it('should not add same talk twice', function () {! expect(Favorites.talks().length).toBe(0);! Favorites.addTalk(talk1);! Favorites.addTalk(talk1);! expect(Favorites.talks().length).toBe(1);! });! });! /test/spec/services/favorites.js
  29. 29. Adding Favorites angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks = Talks.query();! $scope.favorites = Favorites;! }! ); /app/scripts/controllers/schedule.js
  30. 30. Adding Favorites <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author }}! ! <a ng-hide="favorites.isIn(talk)"! ng-click="favorites.addTalk(talk)">! Add to Favorites! </a>! ! </p> /app/index.html
  31. 31. step 3
  32. 32. Routes & Views
  33. 33. Routes angular.module('tryitApp', ['ngRoute'])! .config(function ($routeProvider) {! $routeProvider! .when('/', {! templateUrl: 'views/schedule.html',! controller: 'ScheduleCtrl'! })! .when('/my-schedule', {! templateUrl: 'views/schedule.html',! controller: 'MyScheduleCtrl'! })! .otherwise({! redirectTo: '/'! });! });! /app/scripts/app.js
  34. 34. ng-view <div class="container"! ng-view="">! </div>! /app/index.html
  35. 35. views/schedule.html <h1>Talks</h1>! <p>! <input type="text"ng-model="filterText">! </p>! <div ng-repeat="talk in talks | filter:filterText | orderBy:'starts'">! <h2>{{ talk.title }}</h2>! <p class="meta">! <span class="date">{{ talk.starts | date:'medium' }}</span>! <span class="author">{{ talk.author }}</span>! <a ng-hide="favorites.isIn(talk)"! ng-click="favorites.addTalk(talk)">! Add to Favorites! </a>! </p>! ! <p class="description">! <img ng-src="images/{{ talk.image || 'robot_question.png' }}">! {{ talk.description }}! </p>! </div>! /app/views/schedule.html
  36. 36. MyScheduleCtrl angular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();! $scope.favorites = Favorites;! }); /app/scripts/controllers/myschedule.js
  37. 37. step 4
  38. 38. More… • Directives • Providers • Config • Constants • Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …
  39. 39. Books
  40. 40. Questions?!?
  41. 41. https://github.com/chernando/tryit_angularjs/ https://speakerdeck.com/chernando/try-angularjs
  42. 42. Thanks!
  43. 43. About This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. To view a copy of this license, visit http:// creativecommons.org/licenses/by-nc-sa/3.0/. Product names, logos and trademarks of other companies which are referenced in this document remain the property of those other companies.

×