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
140
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
120
Better Code Design in PHP
afilina
0
250
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
160
Better Code Design in PHP
afilina
1
420
Better Code Design in PHP
afilina
0
570
Adding Tests to Untestable Legacy Code
afilina
0
360
Upgrading Legacy to the Latest PHP Version
afilina
0
380
Semi-Automated Refactoring and Upgrades with Rector
afilina
0
280
Better Code Design in PHP
afilina
1
740
Other Decks in Programming
See All in Programming
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
為你自己學 Python - 冷知識篇
eddie
1
350
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
🔨 小さなビルドシステムを作る
momeemt
4
690
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
KATA
mclloyd
32
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Faster Mobile Websites
deanohume
309
31k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Scaling GitHub
holman
463
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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