Building Kickass SPAs
with AngularJS


Marko Ilievski
Sr. Software Engineer, Netchex

github.com/shizik
github.com/wcpro/ScaffR

What is a SPA anyway?


Web app providing

rich and fluid UX

by loading and executing code

within a single page

What's wrong with jQuery?

It's imperative :(

Hello {{ example1 }}!

<script type="text/javascript">
  $(function () {
    var $name = $('#name');
    var $greeting = $('#greeting');

    $name.keyup(function () {
      $greeting.text('Hello '+ $name.val() + '!');
    })
  })
</script>

Lets see AngularJS?




Hello {{name}}!

Hello {{ example2 }}!

Declarative!

Data Binding

HTML/DOM ⇔ JavaScript

<input
    ng-model="model.message"
    value="{{ message }}" />

$scope.model = {
    message: "{{ message }}"
};

$scope.model.message = "Hello there!"

Dirty checking

Render
↓
Render
↓
Render
↓
Render
↓
Render
↓
$apply

Is that it?!?

Nope. There is a lot more going on:

  • Data Binding
  • Views
  • Templates
  • Routing and Deep Linking
  • Pub/Sub
  • Dependency Injection
  • MV*
  • ...

Full Featured Framework!

There are other frameworks, why Angular?!?


Well...


“Angular is the only framework that doesn’t make MVC seem like putting lipstick on a pig.”

Everything is a Directive


<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
</head>
<body>
    

        Name: 
        
The name is: 

    


    <script src="Scripts/angular.js"></script>
</body>
</html>
						
The name is:

You should use handlebars instead of ng-bind


The name is: {{ name }}

And get much cleaner templates




        
Looping with the ng-repeat Directive

        
    
           
  • {{ name }}
    •

Looping with the ng-repeat Directive

  • {{ name }}

Imagine teaching the HTML new tricks


Well you can! By using directives!


More on that later...




    Your name:
    
    
    
{{greeting}}

View ← $scope → Controller


<script type="text/javascript">
    function MyController($scope) {
        $scope.username = 'World';
 
        $scope.sayHello = function() {
            $scope.greeting = 'Hello ' + $scope.username + '!';
        };
    }
</script>
Your name:

{{greeting}}

<html ng-app="moduleName">

Defining a Module


var myModule = angular.module('myModule', []);
 
// add some controllers and services
myModule.controller('myController', ...);
myModule.service('myService', ...);

// Add provider configuration (route provider for example) 
myModule.config(function(){...});

// Add service configuration 
myModule.run(function(){...});

Defining Routes


var myModule = angular.module('myModule', ['ngRoute']);
 
myModule.config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'indexController',
                templateUrl:'index.html'
            })
        .when('/details',
            {
                controller: 'detailsController',
                templateUrl:'details.html'
            })
        .otherwise({ redirectTo: '/' });
});

Where are these views rendered?

<div ng-view></div>

or

Defining Services


var myModule = angular.module('myModule');

myModule.factory('customerService', function() {
    var newServiceInstance = {};
    var customers = [ ... ];
	
    newServiceInstance.getCustomers = function () {
        return customers;
    };

    return newServiceInstance;
});

Injecting Services


var myModule = angular.module('myModule');

myModule.controller('customerCtrl', function($scope, customerService) {
    $scope.customerList = customerService.getCustomers();
    // do stuff with the list
});

Factory vs Service vs Provider

Live Coding

Putting it all together

Important!


Be careful when using $apply


// Bad
$scope.message = "Yo!";
$scope.$apply();
				
//Good				
$scope.$apply(function() {
    $scope.message = "Yo!";
});

Tools
Batarang | Yeoman | Karma


UI Components
AngularUI | KendoUI | Wijmo


Libraries
BreezeJS | Firebase


Good place to start
http://docs.angularjs.org/guide/

Questions?

  • Complete electronic evaluation forms on the computers in the hall and enter to win!!
    • Infragistics Ultimate
    • Telerik DevCraft
    • JetBrains .NET tools
    • Semos training vouchers
    • Pluralsight subscriptions
    • and many more...