Post on 06-May-2015
description
transcript
Carlos Hernando @chernando
Javascript
AngularJS
�
7KH�3ULQFLSOHV
%RLOHUSODWH
'�5�<� 6WUXFWXUH 7HVWDELOLW\
Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
AngularJS at a glance
View
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: ScheduleCtrlangular.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: Talksangular.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 Injectionangular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! );
/app/scripts/controllers/schedule.js
step 2
Testing
Service: Favoritesangular.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: Favoritesdescribe('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 Favoritesangular.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
Routesangular.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
MyScheduleCtrlangular.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.