Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Powerful Applications with AngularJS

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

Powerful Applications with AngularJS

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina
PRO

May 30, 2015
Tweet

More Decks by Anna Filina

See All by Anna Filina
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
170
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
160
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
220
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
140
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
150
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
130
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
340
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
2
200
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
2
70

Other Decks in Programming

See All in Programming
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
2
260
3179e6bb62dc91d29bb906ffef4fa2d4?s=48 marcoow
0
160
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
750
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
1
280
80728f01bc074c5c2f0d4859258bd793?s=48 ickx
3
590
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
410
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
130
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
1
780
D40b43d43c4d8307c5334f1cb1da03a2?s=48 devinjeon
2
820
E83cdc415df47ab3eae30957ae7e2d33?s=48 ykpythemind
0
130
Ee398a67f5017cc2ad5c02d67d10e516?s=48 doyaaaaaken
1
290
Df4978f14401325586e9e286b140ac4c?s=48 n1215
1
420

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
54
4.3k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
55k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
760
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
53k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
40k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.9k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
10
540
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
502
36k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.4k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
37k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
10
1.7k

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