Angular.js:如何在应用初始化后加载模块?

时间:2014-08-20 06:08:57

标签: javascript angularjs model-view-controller

我所知道的角度执行步骤是这样的:

  1. 加载已定义的模块。
  2. 初始化进样器。
  3. 编译[ng-app]标签内的html。
  4. 然后,如果我想在这三个步骤后加载模块,似乎我必须再次执行这三个步骤。但我不知道如何完成它:-( 有什么好的解决方案吗?非常感谢!

    PS:我提到的'模块'是由angular.module()方法定义的。

2 个答案:

答案 0 :(得分:0)

AngularJs以其依赖注入(DI)而闻名。

假设您有一个名为todoApp的应用。在这个应用程序中,您可能需要Login功能。此外,您可能希望拥有dateTracker,以帮助您在todoApp中出于任何原因跟踪日期。同时,您需要一些动画,因此您需要在应用中加入ngAnimate。其中每一个,我们称之为module

现在,显然,todoApp LogindateTracker以及ngAnimate上的todo 取决于 。它需要这三个模块才能正常运行。那么你要做的就是将三个模块注入todo.js应用程序。

对于var app = angular.module('todoApp', [ //inject all your dependencies here 'Login', 'dateTracker', 'ngAnimate' ]);

.config

也许你想在引导时做一些配置,你可以用 app.config([ //your configurations here ]);

来做
Login.js

现在您需要定义其他模块。

对于angular.module('Login',[]) .factory('LoginService',['$http',function($http){ //do your webservice calling here }); ,您可能需要某项服务来检查用户凭据并对其进行身份验证

dateTracker

不要忘记angular.module('dateTracker',[]); // code something meaningful using this module 模块。

ngAnimate

对于ng-app,您只需要包含该脚本。

关键是,如果您已正确定义模块并根据需要注入它们,则通常不需要重新加载模块(可能有例外)。或者确切地说,如果您正确设计了应用,那么 usaully 不需要多个todoApp。对于上面说明的示例,您需要做的就是让您的html包含<html ng-app = "todoApp"> 模块 ONCE

{{1}}

并且您的其他模块将同时注入和加载。那是Dependency Injection的美丽。

这是simple plnkr

也许我误解了你的问题,或者你专门设计在应用程序被引导后加载其他模块,否则我认为你应该真正加载所有模块ONCE并根据需要注入它们以供使用。

答案 1 :(得分:0)

您真正想要的是创建一个新的注射器。当前应用程序初始化时,您要加载的模块在当前应用程序中将无用。

你可以这样做:

angular.injector(...)

还使用

创建进样器
var injector = angular.bootstrap()

所以,你真正想做的(我猜)是手动引导您的应用程序(不使用ng-app):

angular.element(document).ready(function(){
    var injector = angular.bootstrap(...)
    ....
});

请注意,模块类似于'C'中的“main(){}”函数;一个模块只是指定你的角度应用程序的工作方式。