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
An introduction to AngularJS
Search
Wojciech Sznapka
January 17, 2014
Programming
0
240
An introduction to AngularJS
Quick introduction to AngularJS with some examples
Wojciech Sznapka
January 17, 2014
Tweet
Share
More Decks by Wojciech Sznapka
See All by Wojciech Sznapka
Getting started with Firebase in Angular
sznapka
1
67
PiHome – home automation done with Raspberry PI and Python
sznapka
0
380
Big data in the trenches
sznapka
1
350
PiHome – home automation done with Raspberry PI and Python
sznapka
0
360
Domain-Driven Design in PHP
sznapka
4
2.1k
Map-Reduce patterns
sznapka
3
250
Achieving wise architecture with Symfony2 @ SPUG#5
sznapka
2
190
Smart development environments
sznapka
2
1.6k
Automated tests - facts and myths
sznapka
1
1.7k
Other Decks in Programming
See All in Programming
VibeCoding時代のエンジニアリング
daisuketakeda
0
270
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
170
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.9k
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
Носок на сок
bo0om
0
1.4k
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
110
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
84
21k
ビカム・ア・コパイロット
ymd65536
1
160
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
160
エンジニアが挑む、限界までの越境
nealle
1
350
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
120
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Bash Introduction
62gerente
613
210k
Designing Experiences People Love
moore
142
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Site-Speed That Sticks
csswizardry
6
560
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Embracing the Ebb and Flow
colly
85
4.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
122
52k
Transcript
AngularJS Frontend Development Chapter, 17.01.2014
A.K.A. HTML6 * Powerful JavaScript MVC framework supported by Google.
* Offers minimum boilerplate for great flexibility. * Highly adopted by market. * Operating through custom HTML markup.
Bootstrap // app.html <html ng-app="findash"> </html> // app.js var findash
= angular.module('findash', ['ngResource']); //ngResource is great REST client module findash.config(function($interpolateProvider){ $interpolateProvider.startSymbol('{[').endSymbol(']}'); // to not f*ck with Twig markup });
View layer Templating, loops, filters: <tbody> <tr ng-repeat="expenditure in expenditures">
<td>{[ expenditure.name ]}</td> <td>{[ expenditure.client ]}</td> <td>{[ expenditure.amount | currency:'zł ' ]}</td> <td>{[ expenditure.created_at | date:'yyyy-MM-dd' ]}</td> </tr> </tbody>
Controller Controller code with dependency injection: findash.controller('ExpenditureList', ['$scope', '$resource', 'expendituresService',
function($scope, $resource, expendituresService) { $scope.expenditures = expendituresService.expenditures; } ]); Controller binding in template: <div ng-controller="ExpenditureList"> <table width="100%"> <tbody> <tr ng-repeat="expenditure in expenditures">
Dependency Injection findash.factory('expendituresService', ['$resource', function($resource) { var $resource = $resource;
var inst = { expenditures: [], fetch: function () { return $resource('/expenditures.json').query(); }, }; inst.expenditures = inst.fetch(); return inst; } ]);
Model Two way data binding <div ng-controller="ExpenditureCreate"> <input type="text" ng-model="expenditure.name"
name="name" placeholder="* Nazwa" required /> <button class="small button" ng-click="create(expenditure)" </div> findash.controller('ExpenditureCreate', ['$scope', '$resource', '$filter', 'expendituresService', function($scope, $resource, $filter, expendituresService) { $scope.expenditure = {} $scope.create = function(expenditure) { alert(expenditure.name); // same as inserted in input above }; } ]);
MOAR * Unit tests! * Multiple templates * Routing *
Custom directives * Animations * 3rd party modules
Wojciech Sznapka Thanks!