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
250
Better Code Design in PHP
afilina
1
730
Other Decks in Programming
See All in Programming
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
WindowInsetsだってテストしたい
ryunen344
1
190
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
Is Xcode slowly dying out in 2025?
uetyo
1
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Select API from Kotlin Coroutine
jmatsu
1
190
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Adaptive Systems
keathley
43
2.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Language of Interfaces
destraynor
158
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Applications with DynamoDB
mza
95
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
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