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
60
PiHome – home automation done with Raspberry PI and Python
sznapka
0
370
Big data in the trenches
sznapka
1
320
PiHome – home automation done with Raspberry PI and Python
sznapka
0
350
Domain-Driven Design in PHP
sznapka
4
2.1k
Map-Reduce patterns
sznapka
3
240
Achieving wise architecture with Symfony2 @ SPUG#5
sznapka
2
180
Smart development environments
sznapka
2
1.6k
Automated tests - facts and myths
sznapka
1
1.7k
Other Decks in Programming
See All in Programming
functionalなアプローチで動的要素を排除する
ryopeko
1
200
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
420
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
130
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1k
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
400
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
590
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.8k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
140
快速入門可觀測性
blueswen
0
500
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
Featured
See All Featured
Producing Creativity
orderedlist
PRO
343
39k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
KATA
mclloyd
29
14k
Documentation Writing (for coders)
carmenintech
67
4.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Being A Developer After 40
akosma
89
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Scaling GitHub
holman
459
140k
How GitHub (no longer) Works
holman
312
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
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!