AngularJS bootstrap 或动态加载控制器

Question

我认为这个问题的答案是 "no" 但我还是要问这个问题，因为我似乎找不到明确的答案。

可以 angularjs 动态加载控制器吗？

为了进一步解释，我有一个 angular 应用程序，它通过 ng-app.Example、index.html 文件以默认方式引导：

<!doctype html>
<html>
<head>
    <title>myapp</title>
</head>
<body ng-app="app">
...
<app-body></app-body>
<script src="lib/angular/angular.min.js"></script>
<script src="app/app.js"></script>
...

在应用程序模块中，我有一个路由设置，如下所示：

$routeProvider
          .when('/Home', {
              templateUrl: 'home/home.html',
              controller: 'HomeController'
          })
          .when('/Behaviors', {
              templateUrl: 'contact/contact.html',
              controller: 'ContactController'
          });
        // etc.

我很好奇 - 有没有办法在用户转到该路线时加载 HomeController.js 文件？所以那个js文件不是设置在上面的index.html里面，而是在home/home.html:

里面

<script src="home/HomeController.js"></script>

这样的事情可能吗？

Answer 1

是的，AngularJS 能够动态加载路由控制器和工厂等依赖项。它需要使用 RequireJS。 RequireJS 将是您的入口点，它将加载 Angular。

angular 路由的解析属性将启动对通过 RequireJS 解析文件的一些代码的调用。由于 resolve 属性利用承诺，在加载文件之前不会加载路由。

或者，您可以使用 GulpJS、Gulp-angular-模板缓存、concat、uglify 等优化应用程序。这是一个示例：

http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

AngularJS bootstrap 或动态加载控制器

AngularJS bootstrap or load controllers on the fly

angularjs

angular-bootstrap