Try AngularJS

44
Carlos Hernando @chernando

description

A project based introduction to AngularJS. TryIT 2014

Transcript of Try AngularJS

Page 1: Try AngularJS

Carlos Hernando @chernando

Page 2: Try AngularJS

Javascript

Page 3: Try AngularJS

AngularJS

Page 4: Try AngularJS

7KH�3ULQFLSOHV

%RLOHUSODWH

'�5�<� 6WUXFWXUH 7HVWDELOLW\

Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c

Page 5: Try AngularJS

AngularJS at a glance

Page 6: Try AngularJS
Page 7: Try AngularJS

View

Page 8: Try AngularJS

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

/app/index.html

Page 9: Try AngularJS

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

/app/index.html

Page 10: Try AngularJS

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

Page 11: Try AngularJS

step 0

Page 12: Try AngularJS

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

/app/scripts/app.js

Page 13: Try AngularJS

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

Page 14: Try AngularJS

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

Page 15: Try AngularJS

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

/app/index.html

Page 16: Try AngularJS

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

Page 17: Try AngularJS

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

Page 18: Try AngularJS

step 1

Page 19: Try AngularJS

No JavaScript

Page 20: Try AngularJS

Controllers & Services

Page 21: Try AngularJS

Controller: ScheduleCtrlangular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];! }! );!

/app/scripts/controllers/schedule.js

Page 22: Try AngularJS

$scope

Page 23: Try AngularJS

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

Page 24: Try AngularJS

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

Page 25: Try AngularJS

Dependency Injectionangular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! );

/app/scripts/controllers/schedule.js

Page 26: Try AngularJS

step 2

Page 27: Try AngularJS

Testing

Page 28: Try AngularJS

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

Page 29: Try AngularJS

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

Page 30: Try AngularJS

Adding Favoritesangular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks = Talks.query();! $scope.favorites = Favorites;! }! );

/app/scripts/controllers/schedule.js

Page 31: Try AngularJS

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

Page 32: Try AngularJS

step 3

Page 33: Try AngularJS

Routes & Views

Page 34: Try AngularJS

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

Page 35: Try AngularJS

ng-view<div class="container"! ng-view="">!</div>!

/app/index.html

Page 36: Try AngularJS

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

Page 37: Try AngularJS

MyScheduleCtrlangular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();! $scope.favorites = Favorites;! });

/app/scripts/controllers/myschedule.js

Page 38: Try AngularJS

step 4

Page 39: Try AngularJS

More…• Directives

• Providers

• Config

• Constants

• Directives

• $watch & $apply

• Protractor

• Other modules:

• Resource

• Animation

• …

• …

Page 40: Try AngularJS

Books

Page 41: Try AngularJS

Questions?!?

Page 42: Try AngularJS

https://github.com/chernando/tryit_angularjs/

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

Page 43: Try AngularJS

Thanks!

Page 44: Try AngularJS

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.