Powerful Applications with AngularJS

Transcript

1. foolab.ca | @foolabca
   Powerful Applications
   with AngularJS
   CakeFest, New York - May 30, 2015
   

   View Slide

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

   View Slide

3. Objectives
   • More advanced front-end.
   • Maintainable code with fewer
   bugs.
   • AngularJS site in 30 minutes.
   • Inspire to build great apps.
   3
   

   View Slide

4. The problem with JS
   • Messy content updates.
   • HTML tangled with JS.
   • Hard to keep everything in sync.
   4
   

   View Slide

5. AngularJS
   • Automatic content updates.
   • HTML separated from JS logic.
   • Everything automatically in sync.
   5
   

   View Slide

6. Data flow
   7
   products selectedProduct
   

   View Slide

7. HTML
   
   
   
   
   
   
   
   
   
   
   8
   

   View Slide

8. Inside the DIV
   
   
   
   {{ item.name }}
   
   
   9
   

   View Slide

9. Details
   
   {{ selectedProduct.name }}
   
   [...]
   
   
   
   10
   

   View Slide

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
    

    View Slide

11. Data flow
    12
    $scope.products
    $scope.showDetails
    $scope.selectedProduct
    
    
    {{ selectedProduct.name }}
    

    View Slide

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

    View Slide

13. Data flow
    15
    maxPrice updateResults
    

    View Slide

14. HTML
    ng-model="minPrice"
    ng-change="updateResults()">
    ng-repeat="item in products"
    ng-class="{dim: item.hidden == true}">
    16
    

    View Slide

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
    

    View Slide

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

    View Slide

17. HTML
    
    [...]
    
    
    20
    

    View Slide

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
    

    View Slide

19. View Slide

20. Services
    • Development: PHP, JS, etc.
    • Fix problems: bugs, performance, etc.
    • Workshops: AngularJS, testing, Symfony, etc.
    • Advisor: testing strategy, architecture, etc.
    25
    

    View Slide

21. @afilina afilina.com
    

    View Slide