<!DOCTYPE html>
<html ng-app="DirectoryDemo">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@2.0.0-alpha.31" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<h1>Service vs Factory in AngularJS.</h1>
<p>
The purpose of this demo is to show the different approaches when creating
a factory and a service.
</p>
<p>
Open <code>script.js</code> to see the fully commented code. The main
controller takes an array of names and adds them one by one to the directory.
It then displays the contents of the directory in a table. You can see the
generated output below.
</p>
<hr>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Directory</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in directory track by $index">
<td>
{{person.getFullName()}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(function (ng) {
'use strict';
// intialize module
var app = ng.module('DirectoryDemo', []);
// define components
app.controller('MainController', MainController);
app.service('Directory', Directory);
app.factory('Person', Person);
/**
* MainController
*
* The main controller creates 3 people and adds them to the directory.
*/
function MainController ($scope, Directory) {
var names = [ 'Vincent Chase', 'Johnny Drama', 'Ari Gold' ];
$scope.directory = Directory.people;
angular.forEach(names, function (name) {
name = name.split(' ');
Directory.addPerson(name[0], name[1]);
});
}
/**
* Directory
*
* This service holds an array of people. It also
* exposes some basic methods to control the array.
*
* As this is a service, variables and methods are
* instantiated directly on to 'this'.
*/
function Directory (Person) {
var self = this;
// array of Person objects
this.people = [];
// define methods
this.addPerson = addPerson;
/**
* The addPerson method adds a person object to the people array
*/
function addPerson (firstname, lastname) {
self.people.push(new Person(firstname, lastname));
}
}
/**
* Person
*
* This object holds stores properties and exposes
* basic methods about a person.
*
* As it is instantiated as a factory, we create a new
* object each time using the following syntax:
*
* var john = new Person('John', 'Smith');
*/
function Person () {
function PersonClass (firstname, lastname) {
var self = this;
// define properties
this.firstname = firstname;
this.lastname = lastname;
// define methods
this.getFullName = getFullName;
/**
* Return persons full name
*/
function getFullName () {
return self.firstname + ' ' + self.lastname;
}
}
return (PersonClass);
}
})(angular);
# Service vs Factory in AngularJS.
The purpose of this demo is to show the different approaches when creating a
factory and a service.
Open `script.js` to see the fully commented code. The main controller takes an
array of names and adds them one by one to the directory. It then displays the
contents of the directory in a table.