如何使用AngularJS';控制器组件';具有多个不同控制器的语法
我不熟悉javascript、typescript和AngularJS,目前正试图通过构建一个示例应用程序来学习该语言。 我是一名经验丰富的程序员,有Actionscript/Flex背景 由于我来自Actionscript,我非常喜欢“controller As”语法,因为我不需要处理浮动的非类型$script对象,也不需要做我无法控制的神奇事情(我的观点是不信任javascript;-) 在本例中,我想创建一个html页面,显示将加载数据的各种不同服务的加载信息。我设想使用这个html片段作为页面顶部的标题,它可以显示相册列表、图像列表的加载信息,甚至可以在您登录时显示 这个例子不是我在生产中会做的,因为我不喜欢这个方法,但这是一个学习练习,所以我试图弄清楚它是如何工作的 我有以下类型脚本代码: 加载模块如何使用AngularJS';控制器组件';具有多个不同控制器的语法,angularjs,typescript,Angularjs,Typescript,我不熟悉javascript、typescript和AngularJS,目前正试图通过构建一个示例应用程序来学习该语言。 我是一名经验丰富的程序员,有Actionscript/Flex背景 由于我来自Actionscript,我非常喜欢“controller As”语法,因为我不需要处理浮动的非类型$script对象,也不需要做我无法控制的神奇事情(我的观点是不信任javascript;-) 在本例中,我想创建一个html页面,显示将加载数据的各种不同服务的加载信息。我设想使用这个html片段作
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 ] );
加载.html
<div ng-controller="loginController as loadable">{{loadable.loadingMessage}}</div>
{{loadable.loadingMessage}
这一切都很好,但我总是将loginController传递到html页面。这显然是因为我在html页面中引用了它,所以这会覆盖我在route provider设置中指定的控制器
我的问题是,我可以在一个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}
谢谢你的回复,这似乎正是我正在寻找的,但它不适合我的时刻。我已经更新了路由控制器,但我应该在视图中放置什么?我只尝试了ng controller、ng controller=“as login”和ng controller=“loginController as login”。对于前两个示例,我在控制台和{{login.message}中得到错误,对于第二个选项,在两个视图中都有相同的控制器。如果使用路由,则不需要使用ng controller
。我更新了上面的帖子。您使用路由器使用的ng视图
。这是否回答了您的问题?如果是这样,请接受我的回答对不起,我想先试试看我是否能让它工作,但我忘了把它标记为答案。谢谢