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

2025-04-14 12:11:19

推荐回答（1个）

回答1：

激活状态

有三种方法来激活状态：

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

Templates 模板

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

$stateProvider.state('contacts', {
template: '

My Contacts

'
})

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

$stateProvider.state('contacts', {
templateUrl: 'contacts.html'
})

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

$stateProvider.state('contacts', {
templateProvider:

function ($timeout, $stateParams) {

return $timeout(

function () {

return '

' + $stateParams.contactId + '

'
}, 100);
}
})

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

<body>

<ui-view>

<i>Somecontentwillloadhere!i>

ui-view>

body>

Controllers 控制器

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

$stateProvider.state('contacts', {

template: '

',
controller: function($scope){
$scope.title = 'My Contacts';
}
})

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

$stateProvider.state('contacts', {
template: ...,
controller: 'ContactsCtrl'
})

使用 controllerAs
语法：

$stateProvider.state('contacts', {
template: ...,
controller: 'ContactsCtrl as contact'
})

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

$stateProvider.state('contacts', {
template: ...,
controllerProvider: function($stateParams) {
var ctrlName = $stateParams.type + "Controller";

return ctrlName;
}
})

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

解决器 Resolver

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

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

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

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

My Contacts

' + $stateParams.contactId + '

{{title}}