angular-presentation

View Github Repository Open presentation in a new window

waf

See all presentation from waf

angular-presentation

6 1

angular-presentation

AngularJS presentation and sample projects

On Github waf / angular-presentation

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,

Plain Ol' JavaScript: 
<input type="text" id="my-input-box">
<p id="my-label"></p>
                        
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, 

<input type="text" ng-model="name">
<p>Hello, {{name}}</p>

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>
Add

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/