GUI - Angular:: More sample code; this time, services.
Change-Id: I91422074870722e6a58b096d411e64b5a46c7cc0
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 | + }]); |
-
Please register or login to post a comment