深究AngularJS——ui-router详解

最新推荐文章于 2024-05-16 09:40:04 发布
最新推荐文章于 2024-05-16 09:40:04 发布
阅读量1k 收藏
点赞数
分类专栏： AngulaJS 文章标签： angularjs ui-router

1.配置使用ui-router

1.1导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JS/angular.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JS/angular-ui-router.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

1.2注入angular模块

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> app = angular.<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">module</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图： 
这里写图片描述

1.3定义视图

ui-view替代的是ngroute路由的ng-view。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

1.4配置路由状态

<code class="hljs php has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$stateProvider</span>)</span>{</span>       
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>     
    .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//导航用的名字，如<a ui-sref="login">login</a>里的login</span>
        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/'</span>,    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//访问路径 </span>
        template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div>模板内容......</div>'</span>
    })      

 }]);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

2.简单示例

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>   
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>ui-router<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"pragma"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"no-cache"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"cache-control"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"no-cache"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"expires"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"keywords"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"keyword1,keyword2,keyword3"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"description"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"This is my page"</span>></span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 导入JS --></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JS/angular.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JS/angular-ui-router.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>

  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>   
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span>></span>        
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 视图 --></span>     
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>


  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//定义模板，并注入ui-router</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//对服务进行参数初始化，这里配stateProvider服务的视图控制</span>
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/'</span>,   
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div>模板内容......</div>'</span>
        })     
    }]);  
  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li></ul>

3.嵌套路由的实现

通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span> ></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"parent"</span>></span>点我显示父view内容<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"parent.child"</span>></span>点我显示父view与子view内容<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 父View --></span>      
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>


  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"parent"</span>, {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//父路由</span>
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/parent'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div>parent'</span>
                    +<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div ui-view><div>'</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 子View</span>
                    +<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'</div>'</span>
        })      
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"parent.child"</span>, {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//子路由</span>
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/child'</span>,    
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div>child</div>'</span>
        })     
    }]);

  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

上面的是相对路径方式： 
‘parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/parent/child。 
若改成绝对路径方式，则需要在子url里加上^:

<code class="hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.state</span>("<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">parent</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.child</span>", <span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">url</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'^/child'</span>,    
    template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'<div>child</div>'</span>
</span></span></span>}) </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

此时，’parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/child。

4. 通过views实现多视图

多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。

同一个状态下有多个视图示例：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span> ></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index"</span>></span>点我显示index内容<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"header"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"nav"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"body"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>      
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/index'</span>,  
            views:{
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'header'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>头部内容</div>"</span>},
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'nav'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>菜单内容</div>"</span>},
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'body'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>展示内容</div>"</span>}
            }
        })      

    }]);

  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

5.ui-view的定位

@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span> ></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index"</span>></span>show index<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index.content1"</span>></span>content111111<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index.content2"</span>></span>content222222<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>             
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/index'</span>,  
            views:{
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'index'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div><div ui-view='header'></div>  <div ui-view='nav'></div> <div ui-view='body'></div>  </div>"</span>},
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里必须要绝对定位</span>
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'header@index'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>头部内容header</div>"</span>},
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'nav@index'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>菜单内容nav</div>"</span>},
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'body@index'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>展示内容contents</div>"</span>}
            }
        })    
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//绝对定位</span>
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index.content1"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/content1'</span>,  
            views:{
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'body@index'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>content11111111111111111</div>"</span>}
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//'body@index'表时名为body的view使用index模板</span>
            }
        })  
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的）</span>
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index.content2"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/content2'</span>,  
            views:{
                <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'body'</span>:{template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>content2222222222222222222</div>"</span>}<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//</span>
            }
        })      

    }]);

  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li></ul>

由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。

6.URL路由传参（通过$stateParams服务获取参数）

有url: '/index/:id',和url: '/index/{id}',两种形式传参

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span> ></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index({id:30})"</span>></span>show index<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>    
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"test({username:'peter'})"</span>></span>show test<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>homePage</div>"</span>

        })
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/index/:id'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>indexcontent</div>"</span>,
            controller:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateParams)</span>{</span>
                alert($stateParams.id)
            }
        })  
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"test"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/test/:username'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>testContent</div>"</span>,
            controller:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateParams)</span>{</span>
                alert($stateParams.username)
            }
        })          

    }]);

  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul>

7.Resolve（预载入）

参考资料：

使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。

预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。

如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span> ></span>    
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-app</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"myApp"</span> ></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-sref</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"index"</span>></span>show index<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span>    
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> app = angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'myApp'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]);   
    app.config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$stateProvider"</span>,  <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($stateProvider)</span> {</span>      
        $stateProvider     
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>homePage</div>"</span>

        })
        .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>, {
            url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/index/{id}'</span>,  
            template:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<div>indexcontent</div>"</span>,
            resolve: {
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这个函数的值会被直接返回，因为它不是数据保证</span>
                user: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
                  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> {
                    name: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"peter"</span>,
                    email: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"audiogroup@qq.com"</span>
                  }
                },
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这个函数为数据保证, 因此它将在控制器被实例化之前载入。</span>
                detail: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($http)</span> {</span>
                  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> $http({
                    method: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'JSONP'</span>,
                    url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/current_details'</span>
                  });
                },
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）</span>
                myId: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">($http, detail)</span> {</span>
                  $http({
                    method: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'GET'</span>,
                    url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'http://facebook.com/api/current_user'</span>,
                    params: {
                      email: currentDetails.data.emails[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]
                    }
                  })
                }

            },
            controller:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(user,detail,myId$scope)</span>{</span>
                alert(user.name)
                alert(user.email)
                console.log(detail)
            }
        })                  

    }]);

  </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code>


源引：http://blog.csdn.net/zcl_love_wx/article/details/52034193

alex8046
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ui-router-redirectTo:Angular UI-Router的简单状态重定向
05-22
ui-router-redirectTo Angular UI-Router的简单状态重定向 要求 角> = 1.0.8 UI路由器> = 0.2.0 用法示例 简单的 将模块添加为依赖项： angular . module ( 'yourApp' , [ 'ui.router' , 'ui.router.redirectTo' ] ) ; 然后只需在声明状态时添加redirectTo属性： $stateProvider . state ( 'someState' , { redirectTo : 'anotherState' } ) ; 看，简单！ 太简单。 几乎毫无意义的简单。 真实世界 在使用UI-Router进行状态管理的现实世界中，我们经常发现自己正在处理嵌套状态和抽象状态。 ui-router-redirectTo旨在服务于简化这些情况。 这是一个抽象状态
Angularjs和ui-router的一个栗子
10-18
UI-Router是AngularJS的一个第三方路由插件，它为AngularJS的应用提供了更高级的路由和导航管理功能。 在AngularJS中，路由是非常关键的一部分，它允许用户在不刷新整个页面的情况下跳转到不同的视图。默认的...
Angularjs1.x+ocLazyLoad+angular-ui-router+ui-router-extras
luyangbin01的专栏
06-30 2594
前言总是听人说angularjs的学习曲线很高，个人认为ng的难度是有的，但是要说难到哪里，其实也不见得。总结来说，ng比较有难度的地方应当是路由和lazy加载。今天就把这部分内容通过一个小示例分享给大家。依赖 Angularjs angular-ui-router ui-router-extras.js ocLazyLoad.js 项目包结构代码index.html<!Doctype html>
推荐：UI-Router Extras —— 功能强大的Angular UI-Router扩展
最新发布
gitblog_00036的博客
05-16 377
推荐：UI-Router Extras —— 功能强大的Angular UI-Router扩展 项目地址:https://gitcode.com/christopherthielen/ui-router-extras 如果你在寻找一种方式来增强你的AngularJS应用的路由功能，那么UI-Router Extras可能是你的理想选择。这个开源项目为UI-Router添加了一系列的附加特性，帮助开...
AngularJS实际项目应用——模块划分
Challenge Next Challenge
02-07 2601
angularjs的设计理念是鼓励多模块的，每个模块可以依赖于其它模块，这样可以用模块的概念匹配业务功能。所以在设计angularjs的程序时，可以根据一定的业务规则进行模块划分。 一般来讲，一个angularjs的程序都会有一个app模块，也就是程序的入口点。当然如果功能较少，一个app模块就足够了，剩下的service和controller等其他组件都可以挂到这个app上。但是程序一扩张，就
angularJs ui-router路由之多视图实现菜单缓存切换
qq_43237014的博客
12-25 416
** angularJs ui-router路由之多视图实现菜单缓存切换 **
深究AngularJS之ui-router详解
12-12
1.配置使用ui-router 1.1导入js文件 需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。 [removed][removed] [removed][removed] 1.2注入angular模块 var ...
AngularJS路由Ui-router模块用法示例
10-19
当涉及到更复杂的视图结构和嵌套时，AngularJS原生的`ngRoute`模块可能显得力不从心，这就是`UI-Router`模块的用武之地。 `UI-Router`是AngularJS的一个第三方扩展，它提供了更高级的路由功能，包括视图的嵌套、...
详解angularjs 关于ui-router分层使用
10-19
AngularJS的UI-Router是一个强大的路由插件，它允许开发者创建多级的、有状态的导航结构。在本文中，我们将深入探讨如何在AngularJS应用中分层使用UI-Router。 首先，我们要理解UI-Router的基本概念。它通过定义`...
AngularJS实际项目应用——模块路由
Challenge Next Challenge
02-14 2327
本项目利用了ui-router-extras库的特性，实现了路由的动态加载，即对路由按照模块进行切割，只有用户真正访问某个模块下的页面时，才会去加载对应的模块文件，配置路由。设想一下如果项目有几十个路由甚至更多，用ui-router的方式在app启动时候用config方法去配置，会显得臃肿低效率。如果项目由多个人开发，那么每个人都需要更改自己模块下路由的配置，很容易造成代码冲突。 具体ui-ro
前端项目-ui-router-extras.zip
09-03
前端项目-ui-router-extras,UI路由器附加功能：粘性状态、未来状态、深层状态重定向、过渡承诺
ui-router 1.0 001 - resolve, component, sref-active
weixin_34320724的博客
09-23 92
特性介绍: state支持component形式 state的Resolve配置可以在激活state之前先获取数据, 绑定给component ui-sref-active="active" 用来指定state切换时的激活状态 angularjs 1.5新增component, 就是directive的一个具体实现, 将template和controller封装到一起, 并明确定义了输入和输出 ...
angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块
侞婼冇罪
01-08 3170
七月份的时候有写过一篇OcLazyLoad文章，当时只是初略了解了一下，是为了解决当前项目加载模块过多的问题，但是最后发现项目中模块间耦合性过于复杂，然后项目给出的时间也不是很多，后面就放弃了，这次新项目中使用了。 加载js+css： angular.module('myRouters', ['ui.router', 'oc.lazyLoad']) .config(['$statePr
ui-router 1.0 000 - state定义详解
weixin_33736048的博客
10-30 106
ui.router.state.$stateProvider
angularjs 路由回退，返回到上一个路由
热门推荐
Four的博客
03-08 2万+
在现阶段比较流行的angularjs框架中；路由是一个比较重要的应用；angularjs的单页面是其强大功能之一； 所有的页面其实就只是在一个页面就实现的：angularjs通过对路由的控制来进行页面的跳转； 使用过angularjs的开发者都知道怎么使用ngRoute服务进行页面控制；但是楼主在最近的开发之中； 遇到一个比较棘手的问题：原本app,js已经配置好的路由，每一个页面在使用时对
使用 AngularJS 开发一个大规模的单页应用（SPA）
fxismonk的专栏
05-05 2759
zz from: http://www.oschina.net/translate/developing-a-large-scale-application-with-a-single?print 使用 AngularJS 开发一个大规模的单页应用（SPA） 下载源代码 介绍 （SPA）这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝，那么你一定知道D
angular UI-Router笔记
若耶溪
03-13 309
官网介绍：https://ui-router.github.io/ng1/tutorial/helloworldAdd script tags Add the angular-ui-router.js script tag after angular.js. Create a new script helloworld.js for the application code and add a s...
ui-router路由 很详细
飞雪的博客
05-23 3805
1.配置使用ui-router 1.1导入js文件 需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。 script type="text/javascript" src="JS/angular.min.js">script> script type="text/javascrip
Angularjs中UI Router全攻略
10-22
AngularJS中的UI Router是一个非常强大的路由框架，它可以帮助我们更加灵活地管理AngularJS应用程序的各个页面和状态。本文将全面介绍AngularJS中UI Router的基本用法，帮助初学者快速上手，并深入探讨一些高级用法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值