Powerful Applications with AngularJS

Long gone are the days when your Javascript functions were cluttered with HTML or when you injected AJAX responses into DIVs. Meet AngularJS, the framework that brings you clean separation between application logic and templates, does the heavy lifting for backend communications, helps with multilingual support and much more. I will help you build better applications with less effort.

Transcript

1. foolab.ca | @foolabca
   Powerful Applications
   with AngularJS
   ConFoo, Montreal - February 19, 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. Demo
   

   View Slide

7. Data flow
   7
   products selectedProduct
   

   View Slide

8. HTML
   
   
   
   
   
   
   
   
   
   
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

14. Demo
    

    View Slide

15. Data flow
    15
    maxPrice updateResults
    

    View Slide

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

    View Slide

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

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

    View Slide

19. Demo
    

    View Slide

20. HTML
    
    [...]
    
    
    20
    

    View Slide

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

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

    View Slide

23. Questions?
    More code?
    Feedback: https://joind.in/13273
    Slides & GitHub: @afilina
    

    View Slide

24. Demo
    

    View Slide

25. Javascript
    app.config(function($routeProvider) {
    $routeProvider.
    when('/list', {
    templateUrl: 'list.html',
    controller: 'ProductsListCtrl'
    }).
    when('/detail/:id', {
    templateUrl: 'detail.html',
    controller: 'ProductsDetailCtrl'
    }).
    otherwise({
    redirectTo: '/list'
    });
    });
    25
    

    View Slide

26. Calendar Example
    • http://plnkr.co/edit/7FhBFN
    26
    

    View Slide