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
78
PiHome – home automation done with Raspberry PI and Python
sznapka
0
410
Big data in the trenches
sznapka
1
380
PiHome – home automation done with Raspberry PI and Python
sznapka
0
370
Domain-Driven Design in PHP
sznapka
4
2.1k
Map-Reduce patterns
sznapka
3
280
Achieving wise architecture with Symfony2 @ SPUG#5
sznapka
2
210
Smart development environments
sznapka
2
1.6k
Automated tests - facts and myths
sznapka
1
1.7k
Other Decks in Programming
See All in Programming
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
580
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.2k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Go言語はstack overflowの夢を見るか?
logica0419
0
490
チームの境界をブチ抜いていけ
tokai235
0
200
XP, Testing and ninja testing ZOZ5
m_seki
3
750
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
590
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
3.2k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Bash Introduction
62gerente
615
210k
It's Worth the Effort
3n
187
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Being A Developer After 40
akosma
91
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Six Lessons from altMBA
skipperchong
29
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Gamification - CAS2011
davidbonilla
81
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
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!