Powerful Applications with AngularJS

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

Powerful Applications with AngularJS

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

May 30, 2015
Tweet

Want more?

B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
1
91
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
1
120
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
3
60
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
7
350
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
210
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
130
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
260
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
190
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
280
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
520
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
140
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
230

Transcript

  1. 1.

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

    - May 30, 2015
  2. 2.

    Anna Filina • Developer • Problem solver • Coach •

    Advisor 2
  3. 3.

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

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

    The problem with JS • Messy content updates. • HTML

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

    AngularJS • Automatic content updates. • HTML separated from JS

    logic. • Everything automatically in sync. 5
  6. 6.

    Data flow 7 products selectedProduct

  7. 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. 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. 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. 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. 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. 12.

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

  13. 13.

    Data flow 15 maxPrice updateResults

  14. 14.

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

    == true}"> 16
  15. 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. 16.

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

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

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

  18. 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. 19.
    None
  20. 20.

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

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

    @afilina afilina.com