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">
    <title>Angular Demo</title>

Service (Factory)

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

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


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


//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 () {

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


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 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 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()">

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

<div ng-controller="userController">

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 wrap complicated functionalities enabling easy use of features like AJAX (see $http facade above)

Additional Resources

Repo: Git
Material Design Demo: Here