2

我正在制作一个有 50 多个控制器的大项目，有没有办法在每个控制器出现后独立调用它？我不希望用户一次加载所有控制器。正如您在下面看到的，无论我在我的网站上的哪个位置，都会调用所有控制器。

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(app) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="nodeserverApp">

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>
    enter code here

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/navbar.js"></script>
        <script src="scripts/controllers/login.js"></script>
        <script src="scripts/controllers/signup.js"></script>
        <script src="scripts/controllers/settings.js"></script>
        <script src="scripts/services/auth.js"></script>
        <script src="scripts/services/session.js"></script>
        <script src="scripts/services/user.js"></script>
        <script src="scripts/directives/mongooseError.js"></script>
        <!-- endbuild -->
</body>
</html>

当我尝试将脚本标记移动到视图时，角度不会检测到该控制器并发送错误。

4

2 回答 2

0

您的控制器应如下所示：

angular.module('app')
  .controller('HomeCtrl', function () { /* ... */ });

因此，它们不会被调用，如“invoked”。他们只会在您的模块下注册。

当你配置你的app.js文件，或者你的模块第一次被声明的时候（当你列出它的依赖项时），那是你将路由连接到控制器的时候：

angular.module('app', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider.when('/', {
      controller: 'HomeCtrl',
      template: '<p>hi!</p>',
    });
  });

您作为函数传入的所有内容都angular.module('app').__whatever__将被内部化并仅在需要时使用。因此，您无需担心包含脚本并担心在您的路由激活之前调用您的控制器。

希望我理解正确，这很有帮助。

于 2014-03-06T17:55:47.200 回答
0

我不知道您是否为您的后端网站使用了一些 CMS，但就我而言，我使用 Drupal 作为我网站的基础。对于用户请求的每个页面，我可以使用 Drupal 设置需要加载哪些 JS 文件（通过将它们写入 HTML 文件）。好的，通过这种方式我不能使用 Angular 路由/视图，但在我的情况下它是可以的，因为部分 html 模板工作是由 Drupal 完成的。然而，Sthephen 在谈到连接和缩小您的应用程序源文件时是正确的。这减少了用户请求单个页面的带宽和文件数量。

于 2014-03-07T00:45:45.290 回答