AngularJS:视图和模板URL之间的区别

Question

我正在研究角度js应用程序，我遇到了一个模块stateProvider该模块的配置与其他模块略有不同。

以下是我感到困惑的模块的源代码。

'use strict';
angular
.module('app.authentication', [
'ngResource',
'ngRoute',
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {

var home = {
name: 'app.login',
url: '/login',
views: {
'@': {
templateUrl: 'components/authentication/login.html'
}
}
};
$stateProvider.state(home);
}]);

在这里，您可以看到该模块的templateUrlviews对象内部给出，并且还有'@'符号。我很难理解这段代码的目的。通常，应用程序中的所有其他模块都具有以下模块结构。

"使用严格";

angular
.module('app.home', [
'ngResource',
'ngRoute',
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {
var home = {
name: 'app.home',
url: '/dashboard',
parent: 'app',
templateUrl: 'components/home/home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
};
$stateProvider.state(home);
}]);

有人可以帮助我了解views和'@'语法的目的以及它与templateUrl的区别吗？

Answer 1

views属性用于设置多个视图或手动定位视图。因此，如果您有多个命名视图，这可能很有用。根据文档：

views

{object} - 返回一个views对象，其中每个键都是绝对视图名称(即"viewName@stateName")，每个值是 视图的配置对象(模板、控制器)。即使你不这样做 在状态配置上显式使用 views 对象，一个仍然是 在内部为您创建。因此，通过装饰此构建器功能，您可以 有权访问装饰模板和控制器属性。

在views属性中，您还可以为特定视图定义不同的控制器，以及其他选项：

"views": {
"app@main": {
templateUrl: "url/to/template",
controller: "ControllerName",
controllerAs: "myController"
}
}    

至于@语法，通常您会看到它与[uiview path]和[state anchor]，如 UI-Router 文档 关于通用寻址的部分所述。

例如，在"app@main"中，app将是viewName，main将是stateName。

该文档给出了两个示例：

通用地址示例 1：

[e-mail]：

此示例以名为nestedview的uiview为目标，该嵌套在名为main的uiview内，该由home.child状态创建。

通用地址示例 2：

$default.$default@^.^：

此示例以未命名uiview为目标，该嵌套在另一个由祖父状态创建的未命名uiview中。

另请参阅：

• https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
• https://ui-router.github.io/ng1/docs/1.0.0-beta.1/classes/state.stateprovider.html