홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
c0227754 1 parent 1f95bd3f

GUI - Angular:: More sample code; this time, services. 

Change-Id: I91422074870722e6a58b096d411e64b5a46c7cc0
Inline Side-by-side
Showing 5 changed files with 255 additions and 0 deletions
// ch05-01-need-for-service-app.js
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.tab = 'first';
self.open = function (tab) {
self.tab = tab;
}
}])
.controller('SubCtrl', [function () {
var self = this;
self.list = [
{id: 0, label: 'Item 0'},
{id: 1, label: 'Item 1'}
];
self.add = function () {
var n = self.list.length;
self.list.push({
id: n,
label: 'Item ' + n
});
}
}]);
/*
NOTE: When we use controllers, they are instances that get created and
destroyed as we navigate across the application. Any state they
hold is temporary at best, and cannot be communicated to other
controllers.
That's why we'd use "services" instead.
*/
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<script src="ch05-01-need-for-service-app.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1> Hello Controllers! </h1>
<button ng-click="mainCtrl.open('first')">Open First</button>
<button ng-click="mainCtrl.open('second')">Open Second</button>
<div ng-switch on="mainCtrl.tab">
<div ng-switch-when="first">
<div ng-controller="SubCtrl as ctrl">
<h3>First Tab</h3>
<button ng-click="ctrl.add()">Add more items</button>
<ul>
<li ng-repeat="item in ctrl.list">
<span ng-bind="item.label"></span>
</li>
</ul>
</div>
</div>
<div ng-switch-when="second">
<div ng-controller="SubCtrl as ctrl">
<h3>Second Tab</h3>
<button ng-click="ctrl.add()">Add more items</button>
<ul>
<li ng-repeat="item in ctrl.list">
<span ng-bind="item.label"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1> Hello Services! </h1>
<button ng-click="mainCtrl.logStuff()">Log something</button>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', ['$log', function ($log) {
var self = this;
self.logStuff = function () {
$log.log('The button was pressed');
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<script src="ch05-03-simple-angular-service.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1> Hello Controllers! </h1>
<button ng-click="mainCtrl.open('first')"> Open First </button>
<button ng-click="mainCtrl.open('second')"> Open Second </button>
<div ng-switch on="mainCtrl.tab">
<div ng-switch-when="first">
<div ng-controller="SubCtrl as ctrl">
<h3>First Tab</h3>
<button ng-click="ctrl.add()">Add item</button>
<ul>
<li ng-repeat="item in ctrl.list()">
<span ng-bind="item.label"></span>
</li>
</ul>
</div>
</div>
<div ng-switch-when="second">
<div ng-controller="SubCtrl as ctrl">
<h3>Second Tab</h3>
<button ng-click="ctrl.add()">Add item</button>
<ul>
<li ng-repeat="item in ctrl.list()">
<span ng-bind="item.label"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
// ch05-03-simple-angular-service.js
// this example shows three different ways of defining our own "service"...
// use 'factory()' for functions/plain objects API
// use 'service()' for JS class object API
// use 'provider()' for configurable service API
// this is a service definition
function ItemServiceTwo() {
var items = [
{id: 0, label: 'Item 0'},
{id: 1, label: 'Item 1'}
];
this.list = function () {
return items;
};
this.add = function (item) {
items.push(item);
};
}
// this is a provider definition
function ItemServiceThree(optItems) {
var items = optItems || [];
this.list = function () {
return items;
};
this.add = function (item) {
items.push(item);
}
}
angular.module('notesApp', [])
// [provider] define item service as configurable provider
.provider('ItemServiceThree', function () {
var haveDefaultItems = true;
this.disableDefaultItems = function () {
haveDefaultItems = false;
};
// this function gets our dependencies..
this.$get = [function () {
var optItems = [];
if (haveDefaultItems) {
optItems = [
{id: 0, label: 'Item 0'},
{id: 1, label: 'Item 1'}
];
}
return new ItemServiceThree(optItems);
}];
})
// [provider] define configuration for provider
.config(['ItemServiceThreeProvider', function (ItemServiceThreeProvider) {
// to see how the provider can change configuration
// change the value of shouldHaveDefaults to true and
// try running the example
var shouldHaveDefaults = false;
// get configuration from server.
// set shouldHaveDefaults somehow
// assume it magically changes for now
if (!shouldHaveDefaults) {
ItemServiceThreeProvider.disableDefaultItems();
}
}])
// [service] define item service as a JS class
.service('ItemServiceTwo', [ItemServiceTwo])
// [factory] define item service factory
.factory('ItemService', [function () {
var items = [
{id: 0, label: 'Item 0'},
{id: 1, label: 'Item 1'}
];
return {
list: function () {
return items;
},
add: function (item) {
items.push(item);
}
};
}])
// ======================================================================
// define controllers...
.controller('MainCtrl', [function () {
var self = this;
self.tab = 'first';
self.open = function (tab) {
self.tab = tab;
};
}])
.controller('SubCtrl', ['ItemService', function (ItemService) {
var self = this;
self.list = function () {
return ItemService.list();
};
self.add = function () {
var n = self.list().length;
ItemService.add({
id: n,
label: 'Item ' + n
});
};
}]);