Question

我正在制作一个包含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>

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

Answer 1

您的控制器应如下所示：

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

因此，它们不会被调用，就像在“调用”中一样。它们只会在您的模块下注册。

配置app.js文件时，或者首次声明模块的位置时（列出其依赖项时），当您将路由连接到控制器时：

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

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

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

Answer 2

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

Angularjs如何在视图上导入控制器

2 个答案: