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
73
PiHome – home automation done with Raspberry PI and Python
sznapka
0
390
Big data in the trenches
sznapka
1
370
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
270
Achieving wise architecture with Symfony2 @ SPUG#5
sznapka
2
200
Smart development environments
sznapka
2
1.6k
Automated tests - facts and myths
sznapka
1
1.7k
Other Decks in Programming
See All in Programming
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
460
What's new in AppKit on macOS 26
1024jp
0
170
Hack Claude Code with Claude Code
choplin
8
2.8k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.2k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
640
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Being A Developer After 40
akosma
90
590k
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Adaptive Systems
keathley
43
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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!