1 angular.module('uiRouterSample.contacts', [
2 'ui.router'
3 ])
4
5 .config(
6 [ '$stateProvider', '$urlRouterProvider',
7 function ($stateProvider, $urlRouterProvider) {
8 $stateProvider
9 //
10 // Contacts //
11 //
12 .state('contacts', {
13
14 // With abstract set to true, that means this state can not be explicitly activated.
15 // It can only be implicitly activated by activating one of its children.
16 /**
17 *
18 * 抽象路由模板，该状态永远不会被激活
19 * 只会被其子状态隐式激活
20 * 在本例子中 就是被导航中的ui-sref=contacts.list激活的
21 * */
22 abstract: true,
23
24 // This abstract state will prepend '/contacts' onto the urls of all its children.
25 /**
26 * 这个抽象状态会预置/contacts到其所有的子状态中
27 *
28 * */
29 url: '/contacts',
30
31 // Example of loading a template from a file. This is also a top level state,
32 // so this template file will be loaded and then inserted into the ui-view
33 // within index.html.
34 templateUrl: 'app/contacts/contacts.html',
35
36 // Use `resolve` to resolve any asynchronous controller dependencies
37 // *before* the controller is instantiated. In this case, since contacts
38 // returns a promise, the controller will wait until contacts.all() is
39 // resolved before instantiation. Non-promise return values are considered
40 // to be resolved immediately.
41 /**
42 * resolve处理异步数据调用，在控制器实例化之前
43 *在这个例子中，contacts返回一个promise，控制器会等到promise处理完之后再进行初始化
44 *non-promise会立即resolve
45 */
46 resolve: {
47 contacts: ['contacts',
48 function( contacts){
49 return contacts.all();
50 }]
51 },
52
53 // You can pair a controller to your template. There *must* be a template to pair with.
54 /***
55 * 为template添加控制器。
56 * 必须与template配对
57 *
58 */
59 controller: ['$scope', '$state', 'contacts', 'utils',
60 function ( $scope, $state, contacts, utils) {
61
62 // Add a 'contacts' field in this abstract parent's scope, so that all
63 // child state views can access it in their scopes. Please note: scope
64 // inheritance is not due to nesting of states, but rather choosing to
65 // nest the templates of those states. It's normal scope inheritance.
66 $scope.contacts = contacts;
67
68 $scope.goToRandom = function () {
69 var randId = utils.newRandomKey($scope.contacts, "id", $state.params.contactId);
70
71
72 // $state.go() can be used as a high level convenience method
73 // for activating a state programmatically.
74 /**
75 * go()方法是一个高级又便利的方法
76 *用于激活一个动态的状态
77 */
78 $state.go('contacts.detail', { contactId: randId });
79 };
80 }]
81 })
82
83 /////
84 // Contacts > List //
85 /////
86
87 // Using a '.' within a state name declares a child within a parent.
88 // So you have a new state 'list' within the parent 'contacts' state.
89 /**
90 * 在状态中用一个'.'才分割父状态和子状态，
91 * 所有现在创建了一个新的'list'状态位于父状态'contacts'中
92 */
93 .state('contacts.list', {
94
95 // Using an empty url means that this child state will become active
96 // when its parent's url is navigated to. Urls of child states are
97 // automatically appended to the urls of their parent. So this state's
98 // url is '/contacts' (because '/contacts' + '').
99 /**
100 * 用空的url表示这个子状态会在其父状态导航到时被激活
101 * 子状态会自动添加
102 * 所以这个状态的url='/contacts'+''
103 */
104 url: '',
105
106 // IMPORTANT: Now we have a state that is not a top level state. Its
107 // template will be inserted into the ui-view within this state's
108 // parent's template; so the ui-view within contacts.html. This is the
109 // most important thing to remember about templates.
110 /**
111 * 现在我们有一个非顶级的状态
112 *这个模板会出入到其父状态的ui-view中：也就是contact.html中的ui-view
113 *这是模板中很重要的性质
114 */
115 templateUrl: 'app/contacts/contacts.list.html'
116 })
117
118 ///
119 // Contacts > Detail //
120 ///
121
122 // You can have unlimited children within a state. Here is a second child
123 // state within the 'contacts' parent state.
124 /**
125 * 一个状态的子状态是无限的，这是contacts的第二个子状态
126 */
127 .state('contacts.detail', {
128
129 // Urls can have parameters. They can be specified like :param or {param}.
130 // If {} is used, then you can also specify a regex pattern that the param
131 // must match. The regex is written after a colon (:). Note: Don't use capture
132 // groups in your regex patterns, because the whole regex is wrapped again
133 // behind the scenes. Our pattern below will only match numbers with a length
134 // between 1 and 4.
135 /**
136 * url上可以有参数，定义形式：param 或者 {param}
137 * 如果使用{}，也可以定义成一个正则表达式，参数必须匹配正则
138 *
139 */
140
141 // Since this state is also a child of 'contacts' its url is appended as well.
142 // So its url will end up being '/contacts/{contactId:[0-9]{1,4}}'. When the
143 // url becomes something like '/contacts/42' then this state becomes active
144 // and the $stateParams object becomes { contactId: 42 }.
145 /**
146 * /contacts/42
147 * 这样的url就能访问该状态
148 * 而且$stateParams对象就变成了{contactId:42}
149 *
150 */
151 url: '/{contactId:[0-9]{1,4}}',
152
153 // If there is more than a single ui-view in the parent template, or you would
154 // like to target a ui-view from even higher up the state tree, you can use the
155 // views object to configure multiple views. Each view can get its own template,
156 // controller, and resolve data.
157 /**
158 * 如果父template不止一个ui-view
159 * 或者想访问更往上的状态（—from state tree)
160 * 可以使用views对象来配置多views，每个view都可以从他自己的template,controller,resolve data中获取
161 */
162
163 // View names can be relative or absolute. Relative view names do not use an '@'
164 // symbol. They always refer to views within this state's parent template.
165 // Absolute view names use a '@' symbol to distinguish the view and the state.
166 // So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template.
167 /**
168 * view的名字有相对和绝对两种
169 * 相对的视图名字不需要用@标志
170 * 这些view总会在当前状态的父template中展示
171 *
172 * 绝对名称的view使用@标志来区分状态和视图view
173 * foo@bar bar状态的foo view
174 */
175 views: {
176
177 // So this one is targeting the unnamed view within the parent state's template.
178 /**
179 * ''指向父template中未命名的view
180 */
181 '': {
182 templateUrl: 'app/contacts/contacts.detail.html',
183 controller: ['$scope', '$stateParams', 'utils',
184 function ( $scope, $stateParams, utils) {
185 $scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
186 }]
187 },
188
189 // This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
190 // This shows off how you could populate *any* view within *any* ancestor state.
191 /**
192 * ui-view=hint 操作的是root 也就是index.html
193 *
194 */
195 'hint@': {
196 template: 'This is contacts.detail populating the "hint" ui-view'
197 },
198
199 // This one is targeting the ui-view="menuTip" within the parent state's template.
200 /**
201 * 这个指向父状态template中的menuTip
202 */
203 'menuTip': {
204 // templateProvider is the final method for supplying a template.
205 // There is: template, templateUrl, and templateProvider.
206 /**
207 * templateProvider是提供模板的底层方法
208 *
209 */
210 templateProvider: ['$stateParams',
211 function ( $stateParams) {
212 // This is just to demonstrate that $stateParams injection works for templateProvider.
213 // $stateParams are the parameters for the new state we're transitioning to, even
214 // though the global '$stateParams' has not been updated yet.
215 /**
216 *这里仅仅只是展示$stateParams怎么注入templateProvider的
217 */
218 return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
219 }]
220 }
221 }
222 })
223
224 //
225 // Contacts > Detail > Item //
226 //
227
228 .state('contacts.detail.item', {
229
230 // So following what we've learned, this state's full url will end up being
231 // '/contacts/{contactId}/item/:itemId'. We are using both types of parameters
232 // in the same url, but they behave identically.
233 url: '/item/:itemId',
234 views: {
235
236 // This is targeting the unnamed ui-view within the parent state 'contact.detail'
237 // We wouldn't have to do it this way if we didn't also want to set the 'hint' view below.
238 // We could instead just set templateUrl and controller outside of the view obj.
239 '': {
240 templateUrl: 'app/contacts/contacts.detail.item.html',
241 controller: ['$scope', '$stateParams', '$state', 'utils',
242 function ( $scope, $stateParams, $state, utils) {
243 $scope.item = utils.findById($scope.contact.items, $stateParams.itemId);
244
245 $scope.edit = function () {
246 // Here we show off go's ability to navigate to a relative state. Using '^' to go upwards
247 // and '.' to go down, you can navigate to any relative state (ancestor or descendant).
248 // Here we are going down to the child state 'edit' (full name of 'contacts.detail.item.edit')
249 $state.go('.edit', $stateParams);
250 };
251 }]
252 },
253
254 // Here we see we are overriding the template that was set by 'contacts.detail'
255 'hint@': {
256 template: ' This is contacts.detail.item overriding the "hint" ui-view'
257 }
258 }
259 })
260
261 /////
262 // Contacts > Detail > Item > Edit //
263 /////
264
265 // Notice that this state has no 'url'. States do not require a url. You can use them
266 // simply to organize your application into "places" where each "place" can configure
267 // only what it needs. The only way to get to this state is via $state.go (or transitionTo)
268 /**
269 * 当一个状态并不一定非要有url 可以通过$scope.go 或者ui-sref 指向
270 */
271 .state('contacts.detail.item.edit', {
272 views: {
273
274 // This is targeting the unnamed view within the 'contacts.detail' state
275 // essentially swapping out the template that 'contacts.detail.item' had
276 // inserted with this state's template.
277 '@contacts.detail': {
278 templateUrl: 'app/contacts/contacts.detail.item.edit.html',
279 controller: ['$scope', '$stateParams', '$state', 'utils',
280 function ( $scope, $stateParams, $state, utils) {
281 $scope.item = utils.findById($scope.contact.items, $stateParams.itemId);
282 $scope.done = function () {
283 // Go back up. '^' means up one. '^.^' would be up twice, to the grandparent.
284 /**
285 * 退回父状态
286 * ^.^表示退回两次 即是grandparent
287 */
288 $state.go('^', $stateParams);
289 };
290 }]
291 }
292 }
293 });
294 }
295 ]
296 );
angular.module('uiRouterSample.contacts', [
'ui.router'
])
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
//
// Contacts //
//
.state('contacts', {
// With abstract set to true, that means this state can not be explicitly activated.
// It can only be implicitly activated by activating one of its children.
/**
*
* 抽象路由模板，该状态永远不会被激活
* 只会被其子状态隐式激活
* 在本例子中 就是被导航中的ui-sref=contacts.list激活的
* */
abstract: true,
// This abstract state will prepend '/contacts' onto the urls of all its children.
/**
* 这个抽象状态会预置/contacts到其所有的子状态中
*
* */
url: '/contacts',
// Example of loading a template from a file. This is also a top level state,
// so this template file will be loaded and then inserted into the ui-view
// within index.html.
templateUrl: 'app/contacts/contacts.html',
// Use `resolve` to resolve any asynchronous controller dependencies
// *before* the controller is instantiated. In this case, since contacts
// returns a promise, the controller will wait until contacts.all() is
// resolved before instantiation. Non-promise return values are considered
// to be resolved immediately.
/**
* resolve处理异步数据调用，在控制器实例化之前
*在这个例子中，contacts返回一个promise，控制器会等到promise处理完之后再进行初始化
*non-promise会立即resolve
*/
resolve: {
contacts: ['contacts',
function( contacts){
return contacts.all();
}]
},
// You can pair a controller to your template. There *must* be a template to pair with.
/***
* 为template添加控制器。
* 必须与template配对
*
*/
controller: ['$scope', '$state', 'contacts', 'utils',
function ( $scope, $state, contacts, utils) {
// Add a 'contacts' field in this abstract parent's scope, so that all
// child state views can access it in their scopes. Please note: scope
// inheritance is not due to nesting of states, but rather choosing to
// nest the templates of those states. It's normal scope inheritance.
$scope.contacts = contacts;
$scope.goToRandom = function () {
var randId = utils.newRandomKey($scope.contacts, "id", $state.params.contactId);
// $state.go() can be used as a high level convenience method
// for activating a state programmatically.
/**
* go()方法是一个高级又便利的方法
*用于激活一个动态的状态
*/
$state.go('contacts.detail', { contactId: randId });
};
}]
})
/
// Contacts > List //
/
// Using a '.' within a state name declares a child within a parent.
// So you have a new state 'list' within the parent 'contacts' state.
/**
* 在状态中用一个'.'才分割父状态和子状态，
* 所有现在创建了一个新的'list'状态位于父状态'contacts'中
*/
.state('contacts.list', {
// Using an empty url means that this child state will become active
// when its parent's url is navigated to. Urls of child states are
// automatically appended to the urls of their parent. So this state's
// url is '/contacts' (because '/contacts' + '').
/**
* 用空的url表示这个子状态会在其父状态导航到时被激活
* 子状态会自动添加
* 所以这个状态的url='/contacts'+''
*/
url: '',
// IMPORTANT: Now we have a state that is not a top level state. Its
// template will be inserted into the ui-view within this state's
// parent's template; so the ui-view within contacts.html. This is the
// most important thing to remember about templates.
/**
* 现在我们有一个非顶级的状态
*这个模板会出入到其父状态的ui-view中：也就是contact.html中的ui-view
*这是模板中很重要的性质
*/
templateUrl: 'app/contacts/contacts.list.html'
})
///
// Contacts > Detail //
///
// You can have unlimited children within a state. Here is a second child
// state within the 'contacts' parent state.
/**
* 一个状态的子状态是无限的，这是contacts的第二个子状态
*/
.state('contacts.detail', {
// Urls can have parameters. They can be specified like :param or {param}.
// If {} is used, then you can also specify a regex pattern that the param
// must match. The regex is written after a colon (:). Note: Don't use capture
// groups in your regex patterns, because the whole regex is wrapped again
// behind the scenes. Our pattern below will only match numbers with a length
// between 1 and 4.
/**
* url上可以有参数，定义形式：param 或者 {param}
* 如果使用{}，也可以定义成一个正则表达式，参数必须匹配正则
*
*/
// Since this state is also a child of 'contacts' its url is appended as well.
// So its url will end up being '/contacts/{contactId:[0-9]{1,4}}'. When the
// url becomes something like '/contacts/42' then this state becomes active
// and the $stateParams object becomes { contactId: 42 }.
/**
* /contacts/42
* 这样的url就能访问该状态
* 而且$stateParams对象就变成了{contactId:42}
*
*/
url: '/{contactId:[0-9]{1,4}}',
// If there is more than a single ui-view in the parent template, or you would
// like to target a ui-view from even higher up the state tree, you can use the
// views object to configure multiple views. Each view can get its own template,
// controller, and resolve data.
/**
* 如果父template不止一个ui-view
* 或者想访问更往上的状态（—from state tree)
* 可以使用views对象来配置多views，每个view都可以从他自己的template,controller,resolve data中获取
*/
// View names can be relative or absolute. Relative view names do not use an '@'
// symbol. They always refer to views within this state's parent template.
// Absolute view names use a '@' symbol to distinguish the view and the state.
// So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template.
/**
* view的名字有相对和绝对两种
* 相对的视图名字不需要用@标志
* 这些view总会在当前状态的父template中展示
*
* 绝对名称的view使用@标志来区分状态和视图view
* foo@bar bar状态的foo view
*/
views: {
// So this one is targeting the unnamed view within the parent state's template.
/**
* ''指向父template中未命名的view
*/
'': {
templateUrl: 'app/contacts/contacts.detail.html',
controller: ['$scope', '$stateParams', 'utils',
function ( $scope, $stateParams, utils) {
$scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
}]
},
// This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
// This shows off how you could populate *any* view within *any* ancestor state.
/**
* ui-view=hint 操作的是root 也就是index.html
*
*/
'hint@': {
template: 'This is contacts.detail populating the "hint" ui-view'
},
// This one is targeting the ui-view="menuTip" within the parent state's template.
/**
* 这个指向父状态template中的menuTip
*/
'menuTip': {
// templateProvider is the final method for supplying a template.
// There is: template, templateUrl, and templateProvider.
/**
* templateProvider是提供模板的底层方法
*
*/
templateProvider: ['$stateParams',
function ( $stateParams) {
// This is just to demonstrate that $stateParams injection works for templateProvider.
// $stateParams are the parameters for the new state we're transitioning to, even
// though the global '$stateParams' has not been updated yet.
/**
*这里仅仅只是展示$stateParams怎么注入templateProvider的
*/
return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
}]
}
}
})
//
// Contacts > Detail > Item //
//
.state('contacts.detail.item', {
// So following what we've learned, this state's full url will end up being
// '/contacts/{contactId}/item/:itemId'. We are using both types of parameters
// in the same url, but they behave identically.
url: '/item/:itemId',
views: {
// This is targeting the unnamed ui-view within the parent state 'contact.detail'
// We wouldn't have to do it this way if we didn't also want to set the 'hint' view below.
// We could instead just set templateUrl and controller outside of the view obj.
'': {
templateUrl: 'app/contacts/contacts.detail.item.html',
controller: ['$scope', '$stateParams', '$state', 'utils',
function ( $scope, $stateParams, $state, utils) {
$scope.item = utils.findById($scope.contact.items, $stateParams.itemId);
$scope.edit = function () {
// Here we show off go's ability to navigate to a relative state. Using '^' to go upwards
// and '.' to go down, you can navigate to any relative state (ancestor or descendant).
// Here we are going down to the child state 'edit' (full name of 'contacts.detail.item.edit')
$state.go('.edit', $stateParams);
};
}]
},
// Here we see we are overriding the template that was set by 'contacts.detail'
'hint@': {
template: ' This is contacts.detail.item overriding the "hint" ui-view'
}
}
})
/
// Contacts > Detail > Item > Edit //
/
// Notice that this state has no 'url'. States do not require a url. You can use them
// simply to organize your application into "places" where each "place" can configure
// only what it needs. The only way to get to this state is via $state.go (or transitionTo)
/**
* 当一个状态并不一定非要有url 可以通过$scope.go 或者ui-sref 指向
*/
.state('contacts.detail.item.edit', {
views: {
// This is targeting the unnamed view within the 'contacts.detail' state
// essentially swapping out the template that 'contacts.detail.item' had
// inserted with this state's template.
'@contacts.detail': {
templateUrl: 'app/contacts/contacts.detail.item.edit.html',
controller: ['$scope', '$stateParams', '$state', 'utils',
function ( $scope, $stateParams, $state, utils) {
$scope.item = utils.findById($scope.contact.items, $stateParams.itemId);
$scope.done = function () {
// Go back up. '^' means up one. '^.^' would be up twice, to the grandparent.
/**
* 退回父状态
* ^.^表示退回两次 即是grandparent
*/
$state.go('^', $stateParams);
};
}]
}
}
});
}
]
);
