Example and brief overview of Angular concepts in and up to 1.4.9

Angular Pre-1.5

App Declaration

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


Above we declare our application

Below we bootstrap it into our relevant .html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular Demo</title>
</head>
<body>
    <div>
    </div>
</body>
</html>


Service (Factory)

//$http is injected
app.factory('User', function ($http) {

    //Constructor
    var User = function (user) {

        this.initialize = function () {

            var url = 'http://jsonplaceholder.typicode.com/users/' + user,
            userData = $http.get(url),
            self = this;

            userData.then(function (response) {
                //Equivalent of setting all the JSON data into a field
                angular.extend(self, response.data);
            });
        };
        //Initializes the User entity
        this.initialize();
    };
    return (User);
});


A service is a reusable unit of code that can be injected as a dependency

Later versions of Angular draw a distinction between a factory (which returns an object) and a service (which does not)

Note the facade $http - more on that below

Directive

//Simple directive binding partial view to controller nested within
app.directive('userDirective', function () {
    return {
        templateUrl: 'js/app/templates/userPartial.html'
    }
});


A directive links templates and controllers together specifying what kind of data-binding (if any) is to occur

Controller

//Inject factory
app.controller('userController', function ($scope, User) {

    //Specify accessible controller attributes
    $scope.user = null;

    //Putting main functions right into the controller - not best but is one option.
    $scope.addUser = function (user) {
        $scope.user = new User(user);
    };

    //Initialize data
    $scope.initialize = function () {
        this.addUser(1);
    };

    $scope.refresh = function () {
        var random = Math.round(Math.random() * 10) + 1;
        this.addUser(random);
    };

    $scope.initialize();
});


A controller specifies what data and functions are exposed in the correct area of a view or partial

Here we inject the aforementioned User factory into the $scope of the controller

$scope specifies what data is exposed in the view or partial and accessible within the controller

Partial Views

<div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title">
        <span class="mdl-card__title-text">User Information</span>
    </div>
    <div class="mdl-card__supporting-text">
        <div class="user" id="userWrapper">
            <h1 class="header">Contact Information</h1>
            <span class="userField">Name: {{users[0].name}}</span>
            <span class="userField">Phone: {{users[0].phone}}</span>
            <span class="userField">Email: {{users[0].email}}</span>

            <h1 class="header">Address Information</h1>
            <span class="userField">Street: {{users[0].address.street}}</span>
            <span class="userField">Suite: {{users[0].address.suite}}</span>
            <span class="userField">City: {{users[0].address.city}}</span>
            <span class="userField">Zipcode: {{users[0].address.zipcode}}</span>
        </div>
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <a ng-href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" ng-click="refresh()">
            Refresh
        </a>
    </div>
</div>


Here is a view (alternatively, partial view since it's injected into the primary .html document) or template

<div ng-controller="userController">
    <user-directive/>
</div>


The above code represents a snippet to be placed within the scope (not $scope) of the angular bootstrapping decorator

We wrap the directive to be injected with the relevant controller decorator

Facades

Facades wrap complicated functionalities enabling easy use of features like AJAX (see $http facade above)

Additional Resources

Repo: Git
Material Design Demo: Here
Spec