Slide 1
Slide 1 text
foolab.ca | @foolabca
Powerful Applications
with AngularJS
CakeFest, New York - May 30, 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
Data flow
7
products selectedProduct
Slide 7
Slide 7 text
HTML
8
Slide 8
Slide 8 text
Inside the DIV
![]()
9
{{ item.name }}
Slide 10
Slide 10 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 11
Slide 11 text
Data flow
12
$scope.products
$scope.showDetails
$scope.selectedProduct
Slide 12
Slide 12 text
Directives (ng-)
13
ng-show="selectedProduct"
ng-class="{nostock: selectedProduct.stock == 0 }"
Slide 13
Slide 13 text
Data flow
15
maxPrice updateResults
Slide 14
Slide 14 text
HTML
16
Slide 15
Slide 15 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 16
Slide 16 text
Directives (ng-)
18
$scope.maxPrice
$scope.updateResults = function() {}
Slide 17
Slide 17 text
HTML
[...]
20
Slide 18
Slide 18 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 19
Slide 19 text
No content
Slide 20
Slide 20 text
Services
• Development: PHP, JS, etc.
• Fix problems: bugs, performance, etc.
• Workshops: AngularJS, testing, Symfony, etc.
• Advisor: testing strategy, architecture, etc.
25
Slide 21
Slide 21 text
@afilina afilina.com