홍길동 / 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
1 +// ch05-01-need-for-service-app.js
2 +
3 +angular.module('notesApp', [])
4 + .controller('MainCtrl', [function () {
5 + var self = this;
6 + self.tab = 'first';
7 + self.open = function (tab) {
8 + self.tab = tab;
9 + }
10 + }])
11 + .controller('SubCtrl', [function () {
12 + var self = this;
13 + self.list = [
14 + {id: 0, label: 'Item 0'},
15 + {id: 1, label: 'Item 1'}
16 + ];
17 +
18 + self.add = function () {
19 + var n = self.list.length;
20 + self.list.push({
21 + id: n,
22 + label: 'Item ' + n
23 + });
24 + }
25 + }]);
26 +
27 +/*
28 + NOTE: When we use controllers, they are instances that get created and
29 + destroyed as we navigate across the application. Any state they
30 + hold is temporary at best, and cannot be communicated to other
31 + controllers.
32 +
33 + That's why we'd use "services" instead.
34 + */
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <script src="ch05-01-need-for-service-app.js"></script>
7 +</head>
8 +<body ng-controller="MainCtrl as mainCtrl">
9 +
10 + <h1> Hello Controllers! </h1>
11 + <button ng-click="mainCtrl.open('first')">Open First</button>
12 + <button ng-click="mainCtrl.open('second')">Open Second</button>
13 +
14 + <div ng-switch on="mainCtrl.tab">
15 +
16 + <div ng-switch-when="first">
17 + <div ng-controller="SubCtrl as ctrl">
18 + <h3>First Tab</h3>
19 + <button ng-click="ctrl.add()">Add more items</button>
20 + <ul>
21 + <li ng-repeat="item in ctrl.list">
22 + <span ng-bind="item.label"></span>
23 + </li>
24 + </ul>
25 + </div>
26 + </div>
27 +
28 + <div ng-switch-when="second">
29 + <div ng-controller="SubCtrl as ctrl">
30 + <h3>Second Tab</h3>
31 + <button ng-click="ctrl.add()">Add more items</button>
32 + <ul>
33 + <li ng-repeat="item in ctrl.list">
34 + <span ng-bind="item.label"></span>
35 + </li>
36 + </ul>
37 + </div>
38 + </div>
39 + </div>
40 +</body>
41 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as mainCtrl">
8 +
9 + <h1> Hello Services! </h1>
10 + <button ng-click="mainCtrl.logStuff()">Log something</button>
11 +
12 + <script type="text/javascript">
13 + angular.module('notesApp', [])
14 + .controller('MainCtrl', ['$log', function ($log) {
15 + var self = this;
16 + self.logStuff = function () {
17 + $log.log('The button was pressed');
18 + };
19 + }]);
20 + </script>
21 +</body>
22 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <script src="ch05-03-simple-angular-service.js"></script>
7 +</head>
8 +<body ng-controller="MainCtrl as mainCtrl">
9 +
10 + <h1> Hello Controllers! </h1>
11 +
12 + <button ng-click="mainCtrl.open('first')"> Open First </button>
13 + <button ng-click="mainCtrl.open('second')"> Open Second </button>
14 +
15 + <div ng-switch on="mainCtrl.tab">
16 +
17 + <div ng-switch-when="first">
18 + <div ng-controller="SubCtrl as ctrl">
19 + <h3>First Tab</h3>
20 + <button ng-click="ctrl.add()">Add item</button>
21 + <ul>
22 + <li ng-repeat="item in ctrl.list()">
23 + <span ng-bind="item.label"></span>
24 + </li>
25 + </ul>
26 + </div>
27 + </div>
28 +
29 + <div ng-switch-when="second">
30 + <div ng-controller="SubCtrl as ctrl">
31 + <h3>Second Tab</h3>
32 + <button ng-click="ctrl.add()">Add item</button>
33 + <ul>
34 + <li ng-repeat="item in ctrl.list()">
35 + <span ng-bind="item.label"></span>
36 + </li>
37 + </ul>
38 + </div>
39 + </div>
40 + </div>
41 +
42 +</body>
43 +</html>
1 +// ch05-03-simple-angular-service.js
2 +
3 +// this example shows three different ways of defining our own "service"...
4 +
5 +// use 'factory()' for functions/plain objects API
6 +// use 'service()' for JS class object API
7 +// use 'provider()' for configurable service API
8 +
9 +
10 +// this is a service definition
11 +function ItemServiceTwo() {
12 + var items = [
13 + {id: 0, label: 'Item 0'},
14 + {id: 1, label: 'Item 1'}
15 + ];
16 + this.list = function () {
17 + return items;
18 + };
19 + this.add = function (item) {
20 + items.push(item);
21 + };
22 +}
23 +
24 +// this is a provider definition
25 +function ItemServiceThree(optItems) {
26 + var items = optItems || [];
27 +
28 + this.list = function () {
29 + return items;
30 + };
31 + this.add = function (item) {
32 + items.push(item);
33 + }
34 +}
35 +
36 +angular.module('notesApp', [])
37 +
38 + // [provider] define item service as configurable provider
39 + .provider('ItemServiceThree', function () {
40 + var haveDefaultItems = true;
41 +
42 + this.disableDefaultItems = function () {
43 + haveDefaultItems = false;
44 + };
45 +
46 + // this function gets our dependencies..
47 + this.$get = [function () {
48 + var optItems = [];
49 + if (haveDefaultItems) {
50 + optItems = [
51 + {id: 0, label: 'Item 0'},
52 + {id: 1, label: 'Item 1'}
53 + ];
54 + }
55 + return new ItemServiceThree(optItems);
56 + }];
57 + })
58 +
59 + // [provider] define configuration for provider
60 + .config(['ItemServiceThreeProvider', function (ItemServiceThreeProvider) {
61 + // to see how the provider can change configuration
62 + // change the value of shouldHaveDefaults to true and
63 + // try running the example
64 + var shouldHaveDefaults = false;
65 +
66 + // get configuration from server.
67 + // set shouldHaveDefaults somehow
68 + // assume it magically changes for now
69 + if (!shouldHaveDefaults) {
70 + ItemServiceThreeProvider.disableDefaultItems();
71 + }
72 + }])
73 +
74 + // [service] define item service as a JS class
75 + .service('ItemServiceTwo', [ItemServiceTwo])
76 +
77 + // [factory] define item service factory
78 + .factory('ItemService', [function () {
79 + var items = [
80 + {id: 0, label: 'Item 0'},
81 + {id: 1, label: 'Item 1'}
82 + ];
83 + return {
84 + list: function () {
85 + return items;
86 + },
87 + add: function (item) {
88 + items.push(item);
89 + }
90 + };
91 + }])
92 +
93 + // ======================================================================
94 + // define controllers...
95 + .controller('MainCtrl', [function () {
96 + var self = this;
97 + self.tab = 'first';
98 + self.open = function (tab) {
99 + self.tab = tab;
100 + };
101 + }])
102 +
103 + .controller('SubCtrl', ['ItemService', function (ItemService) {
104 + var self = this;
105 + self.list = function () {
106 + return ItemService.list();
107 + };
108 + self.add = function () {
109 + var n = self.list().length;
110 + ItemService.add({
111 + id: n,
112 + label: 'Item ' + n
113 + });
114 + };
115 + }]);