Powerful Applications with AngularJS

foolab.ca | @foolabca Powerful Applications with AngularJS ConFoo, Montreal -
February 19, 2015

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

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

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

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

Data ﬂow 7 products selectedProduct

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

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

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

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

Data ﬂow 12 $scope.products $scope.showDetails $scope.selectedProduct <div ng-repeat="item in products">
<a ng-click="showDetails(item)"> <h2>{{ selectedProduct.name }}</h2>

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

Data ﬂow 15 maxPrice updateResults

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

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

Directives (ng-) 18 <input ng-model="maxPrice" ng-change="updateResults()"> $scope.maxPrice $scope.updateResults = function()
{} <div ng-class="{dim: item.hidden == true}">

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

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

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

Questions? More code? Feedback: https://joind.in/13273 Slides & GitHub: @aﬁlina

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

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

Powerful Applications with AngularJS

Powerful Applications with AngularJS

Anna Filina

More Decks by Anna Filina

Other Decks in Programming

Featured

Transcript

foolab.ca | @foolabca Powerful Applications with AngularJS ConFoo, Montreal -

Anna Filina • Developer • Problem solver • Coach •

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

The problem with JS • Messy content updates. • HTML

AngularJS • Automatic content updates. • HTML separated from JS

Demo

Data ﬂow 7 products selectedProduct

HTML <html ng-app> <head> <script src="angular.js"></script> <script src="app.js"></script> </head> <body>

Inside the DIV <div ng-controller="ProductsCtrl"> <div ng-repeat="item in products"> <img

Details <div ng-show="selectedProduct"> <h2>{{ selectedProduct.name }}</h2> </div> [...] <div ng-repeat="item

Javascript function ProductsCtrl($scope) { $scope.products = [ { "id": "product-1",

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

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

Demo

Data ﬂow 15 maxPrice updateResults

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

Javascript $scope.query = ''; $scope.minPrice = 1; $scope.maxPrice = 20;

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

Demo

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

Javascript var app = angular.module('myApp', ['ngResource']); app.controller('ProductsCtrl', function($scope, $resource) {

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

Questions? More code? Feedback: https://joind.in/13273 Slides & GitHub: @aﬁlina

Demo

Javascript app.config(function($routeProvider) { $routeProvider. when('/list', { templateUrl: 'list.html', controller: 'ProductsListCtrl'

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