AngularJS

Will Fuqua | Bangkok .NET Users Group | April 2014

The Problem

HTML was originally envisioned for static documents
Users expect responsive, AJAX-driven websites
Creating large web applications is hard

The Problem – A Demo

Hello, {{nameJsDemo}}

Plain Ol' JavaScript:


var myInput = document.getElementById("my-input-box");
var myLabel = document.getElementById("my-label");
myInput.addEventListener("keyup", function() {
    myLabel.innerText = "Hello, " + this.value;
}, false);

HTML with Angular

Hello, {{name}}



Hello, {{name}}

AngularJS's Solution

Model / View / Controller architecture
Databinding removes boilerplate "glue code"
Extends HTML with a vocabulary for dynamic web apps

MVC Architecture

Angular's MVC Architecture

A Simple Angular App


<!DOCTYPE html>
<html ng-app="favorites-app">
    <head>
        <script src="angular.min.js"></script>
        <script>
            var app = angular.module('favorites-app', []);
            app.controller('FavoritesController', function($scope) {
                $scope.favoriteThings = ['JavaScript', '.NET', 'Unicorns'];
            });
        </script>
    </head>
    <body ng-controller="FavoritesController">
        <h1>My Favorite Things</h1>
        <ul>
            <li ng-repeat="favorite in favoriteThings">{{favorite}}</li>
        </ul>
    </body>
</html>

Create root module →

Define a controller →

Set the model →

← Reference our root module

← Reference our controller

Databind to model →

MVC - The Controller

Our controller


app.controller('FavoritesController', function($scope) {
    $scope.favoriteThings = ['JavaScript', '.NET', 'Unicorns'];
});

Uses Dependency Injection


app.controller('FavoritesController', function($log) {
    $log.debug('now we have logging!');
});

or maybe...


app.controller('FavoritesController', function($http) {
    // make an http request!
    $http.get('/api/favorite-things').success(function(data) { 
        ...
    });
});

MVC - The Controller

Tying it all together


app.controller('FavoritesController', function($scope, $http, $log) {
    $log.debug('Making http request...');
    $http.get('/api/favorite-things').success(function(favorites) { 
        $log.debug('...received response');
        $scope.favoriteThings = favorites;
    });
});

MVC - The Model

The model, $scope, holds data for the view:


...
{
    $scope.favoriteThings = ["C#", "AngularJS"];
    $scope.mostFavoriteThing = "Caffeine";
}

It can also hold functions for the view to call:


...
{
    $scope.favoriteThings = ["C#", "AngularJS"];
    $scope.addFavorite = function(newFavorite) {
        $scope.favoriteThings.push(newFavorite);
    }
}

let's call this function from a view...

MVC - The View


<ul>
    <li ng-repeat="favorite in favoriteThings">{{favorite}}</li>
</ul>
<input type="text" ng-model="newFavorite" />
<button ng-click="addFavorite(newFavorite)">Add</button>

{{item}}

AngularJS's Solution

Model / View / Controller architecture
Databinding removes boilerplate "glue code"
Extends HTML with a vocabulary for dynamic web apps
Routing! - move between controllers

Routing

Not part of "core" angular, but almost every app needs it.
Associates a URL with a controller and view
When a user changes the URL (by clicking a link), the active controller and view change

Let's build something!

image sources

Diagrams drawn via: https://www.draw.io/