ng-ui-router 官方示例的解读

  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);
};
}]
            }
          }
        });
}
  ]
);

转载于:https://www.cnblogs.com/windSamW/p/5063394.html