Powerful Applications with AngularJS

B3b2139e4f2c0eca4efe2379fcebc1c5?s=47 Anna Filina
May 30, 2015
Programming
0
76

Powerful Applications with AngularJS

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

May 30, 2015
Tweet

More Decks by Anna Filina

See All by Anna Filina
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
0
170
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
1
110
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
1
130
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
3
91
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
3
310
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
2
190
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
2
59
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
1
25
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
2
160

Other Decks in Programming

See All in Programming
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
7
480
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
2
190
0d04162c7a3c2907c059a06dbcd23cf4?s=48 tokorom
6
250
87137598c23e3e90755e5d7476d21405?s=48 bastnic
1
380
Aaf94d61dec57d1c3cf2de7c09e472d4?s=48 kariad
3
350
439ebe4787a98881df8a59d41baf4a43?s=48 ra1028
8
250
C4b9a181d7fb82642b4c8c1df6ae2b87?s=48 louvre2489
1
160
C95cdabc569dc4c7750d776687f66037?s=48 yutannihilation
0
120
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
1
860
7437b9552e193bb1f8ea757bf1a51175?s=48 aruneko
1
820
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
5
620
7c79a6c043825af5c538fb996430607c?s=48 peacemaker07
2
220

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
298
30k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
250
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
195
9.5k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
7k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
510

Transcript

  1. foolab.ca | @foolabca Powerful Applications with AngularJS CakeFest, New York

    - May 30, 2015

  2. Anna Filina • Developer • Problem solver • Coach •

    Advisor 2

  3. Objectives • More advanced front-end. • Maintainable code with fewer

    bugs. • AngularJS site in 30 minutes. • Inspire to build great apps. 3

  4. The problem with JS • Messy content updates. • HTML

    tangled with JS. • Hard to keep everything in sync. 4

  5. AngularJS • Automatic content updates. • HTML separated from JS

    logic. • Everything automatically in sync. 5

  6. Data flow 7 products selectedProduct

  7. HTML <html ng-app> <head> <script src="angular.js"></script> <script src="app.js"></script> </head> <body>

    <div ng-controller="ProductsCtrl"> </div> </body> </html> 8

  8. Inside the DIV <div ng-controller="ProductsCtrl"> <div ng-repeat="item in products"> <img

    ng-src="{{ item.image }}"> <p>{{ item.name }}</p> </div> </div> 9

  9. Details <div ng-show="selectedProduct"> <h2>{{ selectedProduct.name }}</h2> </div> [...] <div ng-repeat="item

    in products"> <a href="" ng-click="showDetails(item)"></a> </div> 10

  10. Javascript function ProductsCtrl($scope) { $scope.products = [ { "id": "product-1",

    "name": "Skyrim", "description": "Short product description.", "image": "http:...", "price": 19.99, "stock": 10 }]; $scope.showDetails = function(item) { $scope.selectedProduct = item; }; }; 11

  11. Data flow 12 $scope.products $scope.showDetails $scope.selectedProduct <div ng-repeat="item in products">

    <a ng-click="showDetails(item)"> <h2>{{ selectedProduct.name }}</h2>

  12. Directives (ng-) 13 ng-show="selectedProduct" ng-class="{nostock: selectedProduct.stock == 0 }"

  13. Data flow 15 maxPrice updateResults

  14. HTML <input ng-model="minPrice" ng-change="updateResults()"> <div ng-repeat="item in products" ng-class="{dim: item.hidden

    == true}"> 16

  15. Javascript $scope.query = ''; $scope.minPrice = 1; $scope.maxPrice = 20;

    $scope.updateResults = function() { for (var i = 0; i < $scope.products.length; i++) { var product = $scope.products[i]; product.hidden = true; [...] if (matchesQuery && matchesPrice) { product.hidden = false; } }; } 17

  16. Directives (ng-) 18 <input ng-model="maxPrice" ng-change="updateResults()"> $scope.maxPrice $scope.updateResults = function()

    {} <div ng-class="{dim: item.hidden == true}">

  17. HTML <html ng-app="myApp"> [...] <script src="angular.js"></script> <script src="angular-resource.js"></script> 20

  18. Javascript var app = angular.module('myApp', ['ngResource']); app.controller('ProductsCtrl', function($scope, $resource) {

    var url = 'http://api.shop.dev/v1.0/products'; $resource(url).get({}, function(response) { $scope.products = response.data; }); }); 21
  19. None

  20. Services • Development: PHP, JS, etc. • Fix problems: bugs,

    performance, etc. • Workshops: AngularJS, testing, Symfony, etc. • Advisor: testing strategy, architecture, etc. 25

  21. @afilina afilina.com