Slide 1
Slide 1 text
foolab.ca | @foolabca
Powerful Applications
with AngularJS
ConFoo, Montreal - February 19, 2015
Slide 2
Slide 2 text
Anna Filina
• Developer
• Problem solver
• Coach
• Advisor
2
Slide 3
Slide 3 text
Objectives
• More advanced front-end.
• Maintainable code with fewer
bugs.
• AngularJS site in 30 minutes.
• Inspire to build great apps.
3
Slide 4
Slide 4 text
The problem with JS
• Messy content updates.
• HTML tangled with JS.
• Hard to keep everything in sync.
4
Slide 5
Slide 5 text
AngularJS
• Automatic content updates.
• HTML separated from JS logic.
• Everything automatically in sync.
5
Slide 6
Slide 6 text
Demo
Slide 7
Slide 7 text
Data flow
7
products selectedProduct
Slide 8
Slide 8 text
HTML
8
Slide 9
Slide 9 text
Inside the DIV
![]()
9
{{ item.name }}
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Data flow
12
$scope.products
$scope.showDetails
$scope.selectedProduct
Slide 13
Slide 13 text
Directives (ng-)
13
ng-show="selectedProduct"
ng-class="{nostock: selectedProduct.stock == 0 }"
Slide 14
Slide 14 text
Demo
Slide 15
Slide 15 text
Data flow
15
maxPrice updateResults
Slide 16
Slide 16 text
HTML
16
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Directives (ng-)
18
$scope.maxPrice
$scope.updateResults = function() {}
Slide 19
Slide 19 text
Demo
Slide 20
Slide 20 text
HTML
[...]
20
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Services
• Development: PHP, JS, etc.
• Fix problems: bugs, performance, etc.
• Workshops: AngularJS, testing, Symfony, etc.
• Advisor: testing strategy, architecture, etc.
22
Slide 23
Slide 23 text
Questions?
More code?
Feedback: https://joind.in/13273
Slides & GitHub: @afilina
Slide 24
Slide 24 text
Demo
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Calendar Example
• http://plnkr.co/edit/7FhBFN
26