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
97

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
1
900
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
630
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
570
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
2
800
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
91
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
270
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
260
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
0
310
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
190

Other Decks in Programming

See All in Programming
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
420
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
3
800
Ebaf5fd2c63aa33c66b0894034ae87af?s=48 yuichi110
1
130
993ef638264def4334358f986fb4a91d?s=48 uhyo
26
6.9k
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
5
5k
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
420
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
0
460
8ca67ac59d908cf23431095fc2cacb09?s=48 sada913
0
110
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
180
1d1580fb0945b0ffadff18e28bead3c5?s=48 adarapata
1
170
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
2
1.4k

Featured

See All Featured
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
44
2.2k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.1k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
62
7.4k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.3k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
634
51k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.3k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.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