Single Pagе Applications
with
AngularJS
by Pavel Nikolov
me@pavelnikolov.net
Agenda
- What is a SPA
- Why should I care?
- Basic AngularJS concepts
- How to build SPA with AngularJS
What is a SPA?
- A single page application is a web site which loads with a single request to the web server
- After that UI templates and data may be loaded with asynchronous XHR requests on demand.
- Usually changes to the URL in a SPA happen ONLY in the browser and do not cause a round trip to the server.
Examples
- http://slid.es (this presentation)
- Duo Lingo (http://duolingo.com)
- InnoReader (https://innoreader.com)
- SoundCloud (http://soundcloud.com)
- GMail (http://gmail.com)
- Evergig (http://evergig.com)
SPAs have state.
Classical websites are stateless.
Why should I care?
(about SPAs)
Benefits of SPAs
- Very simple project Architecture - TSA (thin server architecture)
- The server is used mainly as an API service
- Preserve state while navigating from one
view to another - More user-friendly
- SPAs feel much faster
- Compiles the UI code to the client so that it improves scalability.
- It's a very trending topic in the dev world.
AngularJS basics
-
Why AngularJS?
- Full featured SPA framework by Google
- Huge community (~30k questions on SO)
- Dx5
- MVW - Model View Whatever
Dx5 - What makes AngularJS
so special?
- Data binding
- Directives
- Dependency injection
- Declarative UI
- Designer friendly
Hello AngularJS World
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="/path/to/angular.js"></script>
</head>
<body ng-controller="HelloCtrl">
{{ message }}
</body>
</html>
angular.module('app',[])
.controller('HelloCtrl', function($scope) {
$scope.message = 'Hello Angular World!';
});
Data Binding
Directives
- Directives allow you to extend HTML
<chart data="reportData" type="pie"></chart>
<map center="{lat:37.0625, lon:-95.677068"></map>
<tabPanel>
<tab title="'Tab1'">content</tab>
<tab title=''Tab2'">more</tab>
</tabPanel
- Types
- Elements <pavel></pavel>
- Attributes <div pavel="value"></div>
- Classes <div class="pavel:value;"></div>
- Comments <!-- directive: pavel value-->
Dependency Injection
- Very good for testability
- Easier reusability
- Cleaner code
app.controller('ReportsCtrl',
function($scope, $http, d3) { $http.get('/path/to/data').success(function(data) { //use d3 here to visualize the data }); });
Declarative UI
Declarative (AngularJS):
<chart type="pie" data="data"></chart>
Imperative (jQuery):
<div id="chart"></div>
<script>
$(document).ready(function() {
$('#chart').callSomeChartPlugin({
type: 'pie',
data: data
});
});
</script>
Designer Friendly
- Many web designers are not JavaScript experts
- The designers can arrange the directives before they even exist
- This results in better team collaboration
Controllers
Each controller is assigned a scope.
<div ng-controller="ProductsCtrl">
Controllers can inherit from each other. Declarative inheritance by nesting.
<div ng-controller="BaseCtrl">
<div ng-controller="ChildCtrl">
....
</div>
</div>
Imperative "inheritance"
Reuse logic in more than one controller without nesting:
var app = angular.module('myApp', []);
app.controller('ParentCtrl ', function($scope) { // some common logic here }); app.controller('ChildCtrl', function($scope, $controller) {
// add child logic to $scope $controller('ParentCtrl', {$scope: $scope}); });
Events
- We can send events to communicate
between controllers (and directives) - $broadcast - send down the chain
- $emit - send upwards the chain
- $on - handle event
<div ng-controller="FirstCtrl"> <div ng-controller="SecondCtrl"> <div ng-controller="ThirdCtrl">
Values, Constants, Services, Factories, Providers
- Values
- Constants
http://jsbin.com/fajanele/2/edit - Services
- Factories
-
Providers
Filters
Angular allows us to transform data with reusable filters
- out of the box filtes
- filter
- currency
- date
- orderBy
http://jsbin.com/qixet/2/edit
- custom filters
http://jsbin.com/beqihani/12/edit
Getting Remote Data
- $http
- $resource
- $restangularDEMO 1
Directives
- Types
- Elements
- Attributes
- Comments
- Classes
DEMO 2
Transclusion
Wrapping content with your components
DEMO 3
Isolated Scope
- By default directives share scope with
all instances - Types of isolated scope
- String
- External variable
- Function
DEMO 4
Using 3rd party libraries with Angular
Building a bar chart with Angular + D3.js
DEMO 5
Resources
-
http://docs.angularjs.org/tutorial - The official
tutorial created by the Angular.js team
-
http://egghead.io - Awesome collection of short
videos. Like RailsCasts for Angular.
-
https://github.com/jmcunningham/
AngularJS-Learning - Huge set of learning
materials about Angular. It contains links to
tutorials, videos, blog articles, sample projects.
Questions?
Looking for a job or
paid internship?
Send me your CV
me [at] pavelnikolov [dot] net
Single Page Applications with Angular.js
By pavelnikolov
Single Page Applications with Angular.js
Walkthrough SPAs with Angular.js
- 3,013