Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Powerful Applications with AngularJS
Search
Anna Filina
May 30, 2015
Programming
0
130
Powerful Applications with AngularJS
Anna Filina
May 30, 2015
Tweet
Share
More Decks by Anna Filina
See All by Anna Filina
Upgrading Legacy to the Latest PHP Version
afilina
1
83
Better Code Design in PHP
afilina
0
230
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
140
Better Code Design in PHP
afilina
1
410
Better Code Design in PHP
afilina
0
540
Adding Tests to Untestable Legacy Code
afilina
0
350
Upgrading Legacy to the Latest PHP Version
afilina
0
360
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
260
Better Code Design in PHP
afilina
1
730
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
240
Goで作る、開発・CI環境
sin392
0
130
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
WindowInsetsだってテストしたい
ryunen344
1
200
エンジニア向け採用ピッチ資料
inusan
0
160
Team operations that are not burdened by SRE
kazatohiei
1
260
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
550
Benchmark
sysong
0
270
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
500
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
609
69k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Bash Introduction
62gerente
614
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Transcript
foolab.ca | @foolabca Powerful Applications with AngularJS CakeFest, New York
- May 30, 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 flow 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 flow 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 flow 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
None
Services • Development: PHP, JS, etc. • Fix problems: bugs,
performance, etc. • Workshops: AngularJS, testing, Symfony, etc. • Advisor: testing strategy, architecture, etc. 25
@afilina afilina.com