Carlos Hernando
@chernando
Javascript
AngularJS
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"></scr...
Data binding
<!doctype html>!
<html>!
<body ng-app>!
<input type="text" ng-model="name">!
!
<p>Hello {{ name }}</p>!
!
<sc...
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 confirm...
ng-repeat
<div ng-repeat="talk in talks">!
<h2>{{ talk.title }}</h2>!
!
<p class="meta">!
{{ talk.starts }}!
{{ talk.autho...
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 |!
or...
Directives & Data-binding
<p class="description">!
<img class="pull-left"!
width="160"!
height="160"!
!
ng-src="images/{{ ...
step 1
No JavaScript
Controllers & Services
Controller: ScheduleCtrl
angular.module('tryitApp')!
.controller('ScheduleCtrl',!
function ($scope) {!
$scope.talks = […];...
$scope
Controllers & Views
<body ng-app="tryitApp">!
!
<div class="container"!
ng-controller="ScheduleCtrl">!
!
<div ng-repeat="t...
Service: Talks
angular.module('tryitApp')!
.service('Talks', function Talks() {!
var talks = [!
{!
'id': 1,!
'title': 'Act...
Dependency Injection
angular.module('tryitApp')!
.controller('ScheduleCtrl',!
function ($scope, Talks) {!
$scope.talks = T...
step 2
Testing
Service: Favorites
angular.module('tryitApp')!
.factory('Favorites', function ($log) {!
var favorites = [];!
!
function ad...
Test: Favorites
describe('Service: Favorites', function () {!
!
beforeEach(module('tryitApp'));!
!
var Favorites,!
talk1 =...
Adding Favorites
angular.module('tryitApp')!
.controller('ScheduleCtrl',!
function ($scope, Talks, Favorites) {!
$scope.ta...
Adding Favorites
<p class="meta">!
{{ talk.starts | date:'medium' }}!
{{ talk.author }}!
!
<a ng-hide="favorites.isIn(talk...
step 3
Routes & Views
Routes
angular.module('tryitApp', ['ngRoute'])!
.config(function ($routeProvider) {!
$routeProvider!
.when('/', {!
templat...
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 | f...
MyScheduleCtrl
angular.module('tryitApp')!
.controller('MyScheduleCtrl',!
function ($scope, Favorites) {!
$scope.talks = F...
step 4
More…
• Directives
• Providers
• Config
• Constants
• Directives
• $watch & $apply
• Protractor
• Other modules:
• Resource...
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 ...
Try AngularJS
Upcoming SlideShare
Loading in …5
×

Try AngularJS

811 views
605 views

Published on

A project based introduction to AngularJS.
TryIT 2014

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
811
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Try AngularJS

  1. 1. Carlos Hernando @chernando
  2. 2. Javascript
  3. 3. AngularJS
  4. 4. Google I/O 2013 - Design Decisions in AngularJS http://youtu.be/HCR7i5F5L8c
  5. 5. AngularJS at a glance
  6. 6. View
  7. 7. Bootstrap <!doctype html>! <html>! <body>! <script src="angular.js"></script>! </body>! </html> /app/index.html
  8. 8. Directives <!doctype html>! <html>! <body ng-app>! ! <input type="text" ng-model="name">! ! <script src="angular.js"></script>! </body>! </html> /app/index.html
  9. 9. 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
  10. 10. step 0
  11. 11. Application Structure 'use strict';! ! angular.module('tryitApp', []); /app/scripts/app.js
  12. 12. 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
  13. 13. 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
  14. 14. Filters <p class="meta">! {{ talk.starts | date:'medium' }}! {{ talk.author | uppercase}}! </p>! ! /app/index.html
  15. 15. 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
  16. 16. 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
  17. 17. step 1
  18. 18. No JavaScript
  19. 19. Controllers & Services
  20. 20. Controller: ScheduleCtrl angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope) {! $scope.talks = […];! }! );! /app/scripts/controllers/schedule.js
  21. 21. $scope
  22. 22. 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
  23. 23. 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
  24. 24. Dependency Injection angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks) {! $scope.talks = Talks.query();! }! ); /app/scripts/controllers/schedule.js
  25. 25. step 2
  26. 26. Testing
  27. 27. 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
  28. 28. 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
  29. 29. Adding Favorites angular.module('tryitApp')! .controller('ScheduleCtrl',! function ($scope, Talks, Favorites) {! $scope.talks = Talks.query();! $scope.favorites = Favorites;! }! ); /app/scripts/controllers/schedule.js
  30. 30. 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
  31. 31. step 3
  32. 32. Routes & Views
  33. 33. 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
  34. 34. ng-view <div class="container"! ng-view="">! </div>! /app/index.html
  35. 35. 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
  36. 36. MyScheduleCtrl angular.module('tryitApp')! .controller('MyScheduleCtrl',! function ($scope, Favorites) {! $scope.talks = Favorites.talks();! $scope.favorites = Favorites;! }); /app/scripts/controllers/myschedule.js
  37. 37. step 4
  38. 38. More… • Directives • Providers • Config • Constants • Directives • $watch & $apply • Protractor • Other modules: • Resource • Animation • … • …
  39. 39. Books
  40. 40. Questions?!?
  41. 41. https://github.com/chernando/tryit_angularjs/ https://speakerdeck.com/chernando/try-angularjs
  42. 42. Thanks!
  43. 43. 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.

×