Single Pagе Applications



by Pavel Nikolov


  • 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.


 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">
    <script src="/path/to/angular.js"></script>
  <body ng-controller="HelloCtrl">
    {{ message }}
  .controller('HelloCtrl', function($scope) {
    $scope.message = 'Hello Angular World!';

Data Binding


  • 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


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>
All base properties and functions are visible in the child. 

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}); });


  • 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


Angular allows us to transform data with reusable filters

Getting Remote Data

  • $http
  • $resource
  • $restangular

    DEMO 1


  • Types
    • Elements
    • Attributes
    • Comments
    • Classes

    DEMO 2


Wrapping content with your components


Isolated Scope

  • By default directives share scope with
    all instances
  • Types of isolated scope
    • String
    • External variable
    • Function


Using 3rd party libraries with Angular

Building a bar chart with Angular + D3.js



  1. - The official
    tutorial created by the Angular.js team

  2. - Awesome collection of short
    videos. Like RailsCasts for Angular.

    AngularJS-Learning - Huge set of learning
    materials about Angular. It contains links to
    tutorials, videos, blog articles, sample projects.


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

  • 2,349
Loading comments...

More from pavelnikolov