Carlos Hernando @chernando 

Javascript 

AngularJS 

 7KH3ULQFLSOHV %RLOHUSODWH '5< 6WUXFWXUH 7HVWDELOLW\ Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c 

AngularJS at a glance 

No content

View 

Bootstrap ! ! ! ! ! /app/index.html 

Directives ! ! ! ! ! ! ! ! /app/index.html 

Data binding ! ! ! ! !

Hello {{ name }}

! ! ! ! /app/index.html 

step 0 

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

Directives /app/index.html 

ng-repeat /app/index.html 

Filters

! {{ talk.starts | date:'medium' }}! {{ talk.author | uppercase}}!

! ! /app/index.html 

ng-repeat & filters ! ! /app/index.html 

Directives & Data-binding

! ! ! {{ talk.description }}!

/app/index.html 

step 1 

No JavaScript 

Controllers & Services 

Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];! }! );! /app/scripts/controllers/schedule.js 

$scope 

Controllers & Views ! !

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 

Dependency Injection angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! ); /app/scripts/controllers/schedule.js 

step 2 

Testing 

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 

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 

Adding Favorites angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks = Talks.query();! $scope.favorites = Favorites;! }! ); /app/scripts/controllers/schedule.js 

Adding Favorites

! {{ talk.starts | date:'medium' }}! {{ talk.author }}! ! ! Add to Favorites! ! !

/app/index.html 

step 3 

Routes & Views 

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 

ng-view ! /app/index.html 

views/schedule.html

Talks

!

! !

! ! /app/views/schedule.html 

MyScheduleCtrl angular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();! $scope.favorites = Favorites;! }); /app/scripts/controllers/myschedule.js 

step 4 

More… • Directives • Providers • Config • Constants • Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • … 

Books 

Questions?!? 

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

Thanks! 

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.