ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。
在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置 通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为 通过嵌套的方式来解决页面中的一些重复出现的部位最简单的形式
模板可以通过下面这种最简单的方式来指定
<!-- in index.html --><body ng-controller="MainCtrl"> <section ui-view></section></body>
// in app-states.js (or whatever you want to name it)$stateProvider.state('contacts', { template: '<h1>My Contacts</h1>'})模板将被插入哪里?
状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html。
激活状态
有三种方法来激活状态：
$state.go()方法，这是一个高级的便利方法。 点击包含ui-sref指令的链接。 导航到与状态相关联的 url。Templates 模板
可以通过下面几种方法来配置一个状态的模板。 方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式。
$stateProvider.state(<span class="hljs-string">'contacts'</span>, { template: <span class="hljs-string">'<h1>My Contacts</h1>'</span>})方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。
$stateProvider.state(<span class="hljs-string">'contacts'</span>, { templateUrl: <span class="hljs-string">'contacts.html'</span>})templateUrl 的值也可以是一个函数返回的url，函数带一个预设参数stateParams。
方法三：通过 templateProvider 函数返回模板的 HTML。
<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'contacts'</span>, { templateProvider: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$timeout</span>, <span class="hljs-variable">$stateParams</span>)</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-variable">$timeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-string">'<h1>'</span> + <span class="hljs-variable">$stateParams</span>.contactId + <span class="hljs-string">'</h1>'</span> }, <span class="hljs-number">100</span>); }})
新闻热点
疑难解答
图片精选
