Question

如何用 Angularjs 的 ui-route 管理状态

Answer 1

激活状态

有三种方法来激活状态：

调用$state.go()方法，这是一个高级的便利方法。
点击包含ui-sref指令的链接。
导航到与状态相关联的 url。

Templates 模板

可以通过下面几种方法来配置一个状态的模板。 方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式。

$stateProvider.state(<spanclass="hljs-string">'contacts'</span>, {
template: <spanclass="hljs-string">'<h1>My Contacts</h1>'</span>
})

方法二：配置 templateUrl
属性，来加载指定位置的模板，这是设置模板的常用方法。

$stateProvider.state(<spanclass="hljs-string">'contacts'</span>, {
templateUrl: <spanclass="hljs-string">'contacts.html'</span>
})

templateUrl的值也可以是一个函数返回的url，函数带一个预设参数stateParams。 方法三：通过 templateProvider 函数返回模板的 HTML。

<spanclass="hljs-variable">$stateProvider</span>.state(<spanclass="hljs-string">'contacts'</span>, {
templateProvider: <spanclass="hljs-function"><spanclass="hljs-keyword">function</span> <spanclass="hljs-params">(<spanclass="hljs-variable">$timeout</span>, <spanclass="hljs-variable">$stateParams</span>)</span> </span>{
<spanclass="hljs-keyword">return</span> <spanclass="hljs-variable">$timeout</span>(<spanclass="hljs-function"><spanclass="hljs-keyword">function</span> <spanclass="hljs-params">()</span> </span>{
<spanclass="hljs-keyword">return</span> <spanclass="hljs-string">'<h1>'</span> + <spanclass="hljs-variable">$stateParams</span>.contactId + <spanclass="hljs-string">'</h1>'</span>
}, <spanclass="hljs-number">100</span>);
}
})

如果想在状态被激活前，让<ui-view>有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。

<spanclass="hljs-tag"><<spanclass="hljs-title">body</span>></span>
<spanclass="hljs-tag"><<spanclass="hljs-title">ui-view</span>></span>
<spanclass="hljs-tag"><<spanclass="hljs-title">i</span>></span>Somecontentwillloadhere!<spanclass="hljs-tag"></<spanclass="hljs-title">i</span>></span>
<spanclass="hljs-tag"></<spanclass="hljs-title">ui-view</span>></span>
<spanclass="hljs-tag"></<spanclass="hljs-title">body</span>></span>

Controllers 控制器

可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。 设置控制器：

$stateProvider.state('contacts', {
<spanclass="hljs-keyword">template</span>: '<h1>{{title}}</h1>',
controller: function($scope){
$scope.title = '<span class="hljs-type">My</span> <span class="hljs-type">Contacts</span>';
}
})

如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：

$stateProvider.state(<spanclass="hljs-string">'contacts'</span>, {
template: <spanclass="hljs-keyword">...</span>,
controller: <spanclass="hljs-string">'ContactsCtrl'</span>
})

使用 controllerAs
语法：

$stateProvider.state(<spanclass="hljs-string">'contacts'</span>, {
template: <spanclass="hljs-keyword">...</span>,
controller: <spanclass="hljs-string">'ContactsCtrl as contact'</span>
})

对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：

$stateProvider.state(<spanclass="hljs-string">'contacts'</span>, {
template: <spanclass="hljs-keyword">...</span>,
controllerProvider: <spanclass="hljs-keyword">function</span>($stateParams) {
var ctrlName = $stateParams.type + <spanclass="hljs-string">"Controller"</span>;
<spanclass="hljs-keyword">return</span> ctrlName;
}
})

控制器可以使用 $scope.on()
方法来监听事件状态转换。 控制器可以根据需要实例化，当相应的 scope 被创建时。例如，当用户点击一个 url 手动导航一个状态时，$stateProvider 将加载对应的模板到视图中，并且将控制器和模板的 scope 绑定在一起。

解决器 Resolver

可以使用 resolver 为控制器提供可选的依赖注入项。 resolver 配置项是一个由key/value构成的对象。

key – {string}：注入控制器的依赖项名称。
factory – {string|function}：

string：一个服务的别名
function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。