Single Page WebApps with Angular.JS

What is AngularJS

Developed by Google
"structural framework for dynamic web apps"
Makes HTML more content centric again
More powerful HTML
Applies an MVVM schema (Model, View, View-Model)

Databinding out of the box

Data Binding

Application Structure

Controller

Used to augment the Angular scope $scope
It should be used to
- Set the initial state of $scope
- Add behavior to the $scope element
Do not use it to
- Manipulate the DOM
- Format input or filter output
- Share code or state accross controllers

Controller Definition

var myApp = angular.module('spicyApp2', []);

myApp.controller('SpicyController', ['$scope', function($scope) {
    $scope.customSpice = "wasabi";
    $scope.spice = 'very';

    $scope.spicy = function(spice) {
        $scope.spice = spice;
    };
}]);

Controller Usage

<div ng-controller="SpicyController">
 <input ng-model="customSpice">
 <button ng-click="spicy('chili')">Chili</button>
 <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
</div>

Filter Definition

angular.module('myReverseFilterApp', [])
.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = "";
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  };
})
.controller('MyController', ['$scope', function($scope) {
  $scope.greeting = 'hello';
}]);

Filter Usage

<div ng-controller="MyController">
  <input ng-model="greeting" type="text"><br>
  No filter: {{greeting}}<br>
  Reverse: {{greeting|reverse}}<br>
  Reverse + uppercase: {{greeting|reverse:true}}<br>
</div>

Routing Definition

var app = angular.module('myServiceModule', []);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'partials/main',
            controller: 'MainCtrl'
        }).
        when('/hello', {
            templateUrl: 'partials/hello',
            controller: 'HelloCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });

        $locationProvider.html5Mode(true);
    });

Routing Usage

<html lang="en" ng-app="phonecatApp">
<head>
  <!-- Commented because of markdown :/
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  -->
</head>
<body>
  <div ng-view></div>
</body>
</html>

Services Definition

var app = angular.module('myServiceModule', []);

app.factory('notify', ['$window', function(win) {
   var msgs = [];
   return function(msg) {
     msgs.push(msg);
     if (msgs.length == 3) {
       win.alert(msgs.join("\n"));
       msgs = [];
     }
   };
 }]);

Services Usage

app.controller('MyController', ['$scope','notify', function ($scope, notify) {
   $scope.callNotify = function(msg) {
     notify(msg);
   };
 }])

Directives

Give the DOM more power!
Can be used for powerful templating or storing data in the DOM

Directives Definition

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

Directives Usage

<div ng-controller="Controller">
  <div my-customer></div>
</div>

Questions?

Thank you!

Link to slides:

dkundel.github.io/angular-presentation

Single Page WebApps

with

Angular.JS

What is AngularJS

Databinding out of the box

Application Structure

Controller

Controller Definition

Controller Usage

Filters

Filter Definition

Filter Usage

Routing

Routing Definition

Routing Usage

Services

Services Definition

Services Usage

Directives

Directives Definition

Directives Usage