Try AngularJS
1 like1,219 views
The document discusses AngularJS and provides code examples for building an AngularJS application. It covers topics like directives, data binding, controllers, services, testing, routes and views. The examples show how to structure an app, add controllers and services, build a schedule view with filtering and favorites, and add routing between schedule and my schedule views. The document recommends additional topics to explore like directives, providers and other AngularJS modules.
![Application Structure
'use strict';!
!
angular.module('tryitApp', []);
/app/scripts/app.js](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-12-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-13-320.jpg)
![Controller: ScheduleCtrl
angular.module('tryitApp')!
.controller('ScheduleCtrl',!
function ($scope) {!
$scope.talks = […];!
}!
);!
/app/scripts/controllers/schedule.js](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-21-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-24-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-28-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/85/Try-AngularJS-34-320.jpg)
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.