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





 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!';
  });
http://jsbin.com/acagag/220/edit

Data Binding


http://jsbin.com/hojebeno/2/edit

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>
All base properties and functions are visible in the child. 
http://jsbin.com/wulobiza/2/edit

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


http://jsbin.com/kesop/1/edit
http://jsfiddle.net/D5rw6/

Filters

Angular allows us to transform data with reusable filters

Getting Remote Data


  • $http
  • $resource
  • $restangular


    DEMO 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


http://jsfiddle.net/hb9db/





DEMO 5

Resources


  1. http://docs.angularjs.org/tutorial - The official
    tutorial created by the Angular.js team

  2. http://egghead.io - Awesome collection of short
    videos. Like RailsCasts for Angular.

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

Made with Slides.com