如何对多个不同的控制器使用 AngularJS 'controller as' 语法
How to use AngularJS 'controller as' syntax with multiple different controllers
我是 javascript、typescript 和 AngularJS 的新手,目前正在尝试通过构建示例应用来学习这门语言。
我是一位经验丰富的程序员,有 Actionscript / Flex 背景。
因为我来自 Actionscript,所以我真的很喜欢 'controller as' 语法,因为我不需要处理无类型的 $script object 并做我无法控制的神奇事情(我作为不信任的人的意见 javascript ;-)。
在这个例子中,虽然我想制作一个 html 页面来显示将加载数据的各种不同服务的加载信息。我设想将此 html 片段用作页面顶部的 header,它可以显示相册列表、图像列表的加载信息,甚至可以在您登录时显示。
这个例子不是我在生产中会做的,因为有很多我不喜欢这种方法的地方,但这是一个学习练习,所以我试图弄清楚它是如何工作的。
我有以下 TypeScript 代码:
加载模块
export interface ILoadable
{
isLoading : boolean;
isLoaded : boolean;
loadingMessage : string;
errorMessage : string;
}
export class LoadingController implements ILoadable
{
// Constructor
constructor( private service? : ILoadable )
{
}
// Properties
public get isLoading() : boolean
{
return this.service ? this.service.isLoading : true;
}
public get isLoaded() : boolean
{
return this.service ? this.service.isLoaded : false;
}
public get loadingMessage() : string
{
return this.service ? this.service.loadingMessage : "Loading...";
}
public get errorMessage() : string
{
return this.service ? this.service.errorMessage : "There was a fault.";
}
}
应用程序
app.config( ($routeProvider) => {
$routeProvider
.when( '/albums', { templateUrl: './pages/albums.html' } )
.when( '/album', { templateUrl: './pages/album.html' } )
.when( '/pictures', { templateUrl: './pages/pictures.html' } )
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController" } )
.when( '/loadingAlbums', { templateUrl: './pages/loading.html', controller : "loadingAlbumsController" } )
.when( '/404', { templateUrl: './pages/404.html' } )
.otherwise( { redirectTo: '/loggingIn' } )
});
app.controller( "loginController", [ "authenticator", Picasa.LoadingController ] );
app.controller( "loadingAlbumsController", [ Picasa.LoadingController ] );
Loading.html
<div ng-controller="loginController as loadable">{{loadable.loadingMessage}}</div>
这一切都很好,但我总是将 loginController 传递到 html 页面。这显然是因为我在 html 页面中引用了它,所以这会覆盖我在路由提供程序设置中指定的控制器。
我的问题是我可以在 html 页面中使用 "controller as" 设置来注入不同的控制器吗?
我希望 html 页面设置与 ILoadable 一起使用。
我不想将 $scope 注入我的控制器并在其上设置属性。
理想情况下,我能够将服务直接注入 html 页面,这样我就不必拥有控制器包装器。
非常感谢
您可以使用 controllerAs
路由语法:
$routeProvider
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController", controllerAs: 'login' } )
您的 Index.html
应该有 ng-view=""
,这是视图将被替换的地方。
这将使您能够在视图中执行 {{login.message}}
。
我是 javascript、typescript 和 AngularJS 的新手,目前正在尝试通过构建示例应用来学习这门语言。 我是一位经验丰富的程序员,有 Actionscript / Flex 背景。
因为我来自 Actionscript,所以我真的很喜欢 'controller as' 语法,因为我不需要处理无类型的 $script object 并做我无法控制的神奇事情(我作为不信任的人的意见 javascript ;-)。
在这个例子中,虽然我想制作一个 html 页面来显示将加载数据的各种不同服务的加载信息。我设想将此 html 片段用作页面顶部的 header,它可以显示相册列表、图像列表的加载信息,甚至可以在您登录时显示。
这个例子不是我在生产中会做的,因为有很多我不喜欢这种方法的地方,但这是一个学习练习,所以我试图弄清楚它是如何工作的。
我有以下 TypeScript 代码:
加载模块
export interface ILoadable
{
isLoading : boolean;
isLoaded : boolean;
loadingMessage : string;
errorMessage : string;
}
export class LoadingController implements ILoadable
{
// Constructor
constructor( private service? : ILoadable )
{
}
// Properties
public get isLoading() : boolean
{
return this.service ? this.service.isLoading : true;
}
public get isLoaded() : boolean
{
return this.service ? this.service.isLoaded : false;
}
public get loadingMessage() : string
{
return this.service ? this.service.loadingMessage : "Loading...";
}
public get errorMessage() : string
{
return this.service ? this.service.errorMessage : "There was a fault.";
}
}
应用程序
app.config( ($routeProvider) => {
$routeProvider
.when( '/albums', { templateUrl: './pages/albums.html' } )
.when( '/album', { templateUrl: './pages/album.html' } )
.when( '/pictures', { templateUrl: './pages/pictures.html' } )
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController" } )
.when( '/loadingAlbums', { templateUrl: './pages/loading.html', controller : "loadingAlbumsController" } )
.when( '/404', { templateUrl: './pages/404.html' } )
.otherwise( { redirectTo: '/loggingIn' } )
});
app.controller( "loginController", [ "authenticator", Picasa.LoadingController ] );
app.controller( "loadingAlbumsController", [ Picasa.LoadingController ] );
Loading.html
<div ng-controller="loginController as loadable">{{loadable.loadingMessage}}</div>
这一切都很好,但我总是将 loginController 传递到 html 页面。这显然是因为我在 html 页面中引用了它,所以这会覆盖我在路由提供程序设置中指定的控制器。
我的问题是我可以在 html 页面中使用 "controller as" 设置来注入不同的控制器吗? 我希望 html 页面设置与 ILoadable 一起使用。 我不想将 $scope 注入我的控制器并在其上设置属性。
理想情况下,我能够将服务直接注入 html 页面,这样我就不必拥有控制器包装器。
非常感谢
您可以使用 controllerAs
路由语法:
$routeProvider
.when( '/loggingIn', { templateUrl: './pages/loading.html', controller : "loginController", controllerAs: 'login' } )
您的 Index.html
应该有 ng-view=""
,这是视图将被替换的地方。
这将使您能够在视图中执行 {{login.message}}
。