$30 off During Our Annual Pro Sale. View Details »

Powerful Applications with AngularJS

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.

Anna Filina
PRO

February 19, 2015
Tweet

More Decks by Anna Filina

Other Decks in Programming

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