Try AngularJS!

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

Bootstrap <!doctype html>! <html>! <body>! <script src="angular.js"></script>! </body>! </html> /app/index.html

Directives <!doctype html>! <html>! <body ng-app>! ! <input type="text" ng-model="name">!
! <script src="angular.js"></script>! </body>! </html> /app/index.html

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

step 0

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

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

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

Filters <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author
| uppercase}}! </p>! ! /app/index.html

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

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

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 <body ng-app="tryitApp">! ! <div class="container"! ng-controller="ScheduleCtrl">! !
<div ng-repeat="talk in talks …">! <h2>{{ talk.title }}</h2>! …! </div> /app/index.html

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 <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

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 <div class="container"! ng-view="">! </div>! /app/index.html

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

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 • Conﬁg • Constants •
Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …

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.

Try AngularJS!

Try AngularJS!

More Decks by Carlos Hernando

Other Decks in Programming

Featured

Transcript