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
230
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
57
PiHome – home automation done with Raspberry PI and Python
sznapka
0
350
Big data in the trenches
sznapka
1
290
PiHome – home automation done with Raspberry PI and Python
sznapka
0
340
Domain-Driven Design in PHP
sznapka
4
2k
Map-Reduce patterns
sznapka
3
230
Achieving wise architecture with Symfony2 @ SPUG#5
sznapka
2
170
Smart development environments
sznapka
2
1.6k
Automated tests - facts and myths
sznapka
1
1.6k
Other Decks in Programming
See All in Programming
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
Ruby Parser progress report 2024
yui_knk
2
230
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
260
Prolog入門
qnighy
4
1k
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
190
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
240
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
230
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
A New Era of Testing
mannodermaus
2
520
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
3.9k
We Have a Design System, Now What?
morganepeng
48
7.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
GitHub's CSS Performance
jonrohan
1030
450k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
RailsConf 2023
tenderlove
28
810
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Statistics for Hackers
jakevdp
794
220k
A Philosophy of Restraint
colly
202
16k
How STYLIGHT went responsive
nonsquared
93
5.1k
Infographics Made Easy
chrislema
239
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!