Try AngularJS
•
1 j'aime•1,216 vues
A project based introduction to AngularJS. TryIT 2014
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Try AngularJS
Similaire à Try AngularJS (20)
Plus de Carlos Hernando
Dernier
Dernier (20)
Try AngularJS
- 2. Javascript
- 3. AngularJS
- 4. Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
- 5. AngularJS at a glance
- 7. View
- 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
- 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: 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
- 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
- 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?!?
- 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.