Try AngularJS

  • 418 views
Uploaded on

A project based introduction to AngularJS. …

A project based introduction to AngularJS.
TryIT 2014

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
1

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. Carlos Hernando @chernando
  • 2. Javascript
  • 3. AngularJS
  • 4. Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
  • 5. AngularJS at a glance
  • 6. View
  • 7. Bootstrap <!doctype html>! <html>! <body>! <script src="angular.js"></script>! </body>! </html> /app/index.html
  • 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. 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. step 0
  • 11. Application Structure 'use strict';! ! angular.module('tryitApp', []); /app/scripts/app.js
  • 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. 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. Filters <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author | uppercase}}! </p>! ! /app/index.html
  • 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. 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. step 1
  • 18. No JavaScript
  • 19. Controllers & Services
  • 20. Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];! }! );! /app/scripts/controllers/schedule.js
  • 21. $scope
  • 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. 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. Dependency Injection angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! ); /app/scripts/controllers/schedule.js
  • 25. step 2
  • 26. Testing
  • 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. 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. Adding Favorites angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks = Talks.query();! $scope.favorites = Favorites;! }! ); /app/scripts/controllers/schedule.js
  • 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. step 3
  • 32. Routes & Views
  • 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. ng-view <div class="container"! ng-view="">! </div>! /app/index.html
  • 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. MyScheduleCtrl angular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();! $scope.favorites = Favorites;! }); /app/scripts/controllers/myschedule.js
  • 37. step 4
  • 38. More… • Directives • Providers • Config • Constants • Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …
  • 39. Books
  • 40. Questions?!?
  • 41. https://github.com/chernando/tryit_angularjs/ https://speakerdeck.com/chernando/try-angularjs
  • 42. Thanks!
  • 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.