Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Try AngularJS!

Try AngularJS!

A project based introduction to AngularJS

8da980a2f4466f05bf026b18c04984d6?s=128

Carlos Hernando

March 19, 2014
Tweet

Transcript

  1. Carlos Hernando @chernando

  2. Javascript

  3. AngularJS

  4.  7KH3ULQFLSOHV %RLOHUSODWH '5< 6WUXFWXUH 7HVWDELOLW\ Google I/O 2013 -

    Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
  5. AngularJS at a glance

  6. None
  7. View

  8. Bootstrap <!doctype html>! <html>! <body>! <script src="angular.js"></script>! </body>! </html> /app/index.html

  9. Directives <!doctype html>! <html>! <body ng-app>! ! <input type="text" ng-model="name">!

    ! <script src="angular.js"></script>! </body>! </html> /app/index.html
  10. 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
  11. step 0

  12. Application Structure 'use strict';! ! angular.module('tryitApp', []); /app/scripts/app.js

  13. 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
  14. 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
  15. Filters <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author

    | uppercase}}! </p>! ! /app/index.html
  16. 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
  17. 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
  18. step 1

  19. No JavaScript

  20. Controllers & Services

  21. Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];!

    }! );! /app/scripts/controllers/schedule.js
  22. $scope

  23. 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
  24. Service: T alks 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
  25. Dependency Injection angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks =

    Talks.query();! }! ); /app/scripts/controllers/schedule.js
  26. step 2

  27. Testing

  28. 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
  29. 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
  30. Adding Favorites angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks

    = Talks.query();! $scope.favorites = Favorites;! }! ); /app/scripts/controllers/schedule.js
  31. 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
  32. step 3

  33. Routes & Views

  34. 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
  35. ng-view <div class="container"! ng-view="">! </div>! /app/index.html

  36. 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
  37. MyScheduleCtrl angular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();!

    $scope.favorites = Favorites;! }); /app/scripts/controllers/myschedule.js
  38. step 4

  39. More… • Directives • Providers • Config • Constants •

    Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …
  40. Books

  41. Questions?!?

  42. https://github.com/chernando/tryit_angularjs/ https://speakerdeck.com/chernando/try-angularjs

  43. Thanks!

  44. 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.