Powerful Applications with AngularJS

B3b2139e4f2c0eca4efe2379fcebc1c5?s=47 Anna Filina
February 19, 2015

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.

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

February 19, 2015
Tweet

Transcript

  1. 3.

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

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

    The problem with JS • Messy content updates. • HTML

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

    AngularJS • Automatic content updates. • HTML separated from JS

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

    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
  6. 10.
  7. 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
  8. 12.

    Data flow 12 $scope.products $scope.showDetails $scope.selectedProduct <div ng-repeat="item in products">

    <a ng-click="showDetails(item)"> <h2>{{ selectedProduct.name }}</h2>
  9. 14.
  10. 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
  11. 19.
  12. 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
  13. 22.

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

    performance, etc. • Workshops: AngularJS, testing, Symfony, etc. • Advisor: testing strategy, architecture, etc. 22
  14. 24.
  15. 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