Download as PDF, PPTX
![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)
![Application Structure
'use strict';!
!
angular.module('tryitApp', []);
/app/scripts/app.js](https://image.slidesharecdn.com/angularjs-20tryit-140414031231-phpapp01/75/Try-AngularJS-12-2048.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/75/Try-AngularJS-13-2048.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/75/Try-AngularJS-21-2048.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/75/Try-AngularJS-24-2048.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/75/Try-AngularJS-28-2048.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/75/Try-AngularJS-34-2048.jpg)
Uploaded byCarlos Hernando
Try AngularJS
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.
More Related Content
Try AngularJS
- 1.
- 2.
- 3.
- 4. Google I/O 2013- Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
- 5. AngularJS at aglance
- 7.
- 8.
- 9. Directives <!doctype html>! <html>! <body ng-app>! ! <inputtype="text" ng-model="name">! ! <script src="angular.js"></script>! </body>! </html> /app/index.html
- 10. Data binding <!doctype html>! <html>! <bodyng-app>! <input type="text" ng-model="name">! ! <p>Hello {{ name }}</p>! ! <script src="angular.js"></script>! </body>! </html> /app/index.html
- 11.
- 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 intalks">! <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 <inputtype="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 <pclass="description">! <img class="pull-left"! width="160"! height="160"! ! ng-src="images/{{ talk.image || 'robot.png' }}">! ! {{ talk.description }}! </p> /app/index.html
- 18.
- 19.
- 20.
- 21. Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope){! $scope.talks = […];! }! );! /app/scripts/controllers/schedule.js
- 22.
- 23. Controllers & Views <bodyng-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', functionTalks() {! 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.
- 27.
- 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.
- 33.
- 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.
- 36. views/schedule.html <h1>Talks</h1>! <p>! <input type="text"ng-model="filterText">! </p>! <div ng-repeat="talkin 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.
- 39. More… • Directives • Providers •Config • Constants • Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …
- 40.
- 41.
- 42.
- 43.
- 44. About This work islicensed 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.