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
360
Big data in the trenches
sznapka
1
300
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
offers_20241022_imakiire.pdf
imakurusu
1
140
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
110
画像でわかる北島直樹
naoki0917
0
140
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
860
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
200
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
200
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
200
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
240
RailsのPull requestsのレビューの時に私が考えていること
yahonda
3
470
GPU Hash Table | レイトレ合宿10
yknishidate
0
350
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
670
本編では話さない Zig の話
andpad
2
130
Featured
See All Featured
Fireside Chat
paigeccino
32
3k
How STYLIGHT went responsive
nonsquared
95
5.1k
Scaling GitHub
holman
458
140k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Visualization
eitanlees
143
15k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.7k
Why Our Code Smells
bkeepers
PRO
334
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Docker and Python
trallard
40
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Become a Pro
speakerdeck
PRO
24
4.9k
Designing for humans not robots
tammielis
249
25k
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!