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
PRO
May 30, 2015
Programming
0
120
Powerful Applications with AngularJS
Anna Filina
PRO
May 30, 2015
Tweet
Share
More Decks by Anna Filina
See All by Anna Filina
Better Code Design in PHP
afilina
PRO
0
320
Adding Tests to Untestable Legacy Code
afilina
PRO
0
230
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
250
Semi-Automated Refactoring and Upgrades with Rector
afilina
PRO
0
130
Better Code Design in PHP
afilina
PRO
1
590
Effortless Software Development
afilina
PRO
1
250
Writing Testable Symfony Apps
afilina
PRO
0
330
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
320
Avoid Costly Framework Upgrades
afilina
PRO
2
1.6k
Other Decks in Programming
See All in Programming
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
GoのIteratorに詳しくなってしまう
inatonix
1
170
(非公開スライド追加)座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
1
140
Mergeable Libraryで 高速なアプリ起動を実現しよう!
giginet
PRO
1
1.9k
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
3
630
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
dotfiles について話したい #湘なんか
stefafafan
2
280
Meet BrowserEngineKit
swiftty
0
190
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Making Projects Easy
brettharned
113
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Designing the Hi-DPI Web
ddemaree
278
34k
4 Signs Your Business is Dying
shpigford
179
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
A Philosophy of Restraint
colly
202
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
Ruby is Unlike a Banana
tanoku
96
10k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
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