更改视图时加载控制器的最简单方法是什么？答案

【问题标题】：What is the simplest way to load a controller when i change the view?更改视图时加载控制器的最简单方法是什么？
【发布时间】：2016-05-22 05:12:15
【问题描述】：

当我从一个视图切换到另一个视图时，我想加载一个控制器。

例如，我在主页中，用户想进入登录页面。我在一个不包含在 app.js（主要 AngularJS 脚本）中的文件中有一个 LoginController，我只想在用户进入登录页面时才加载它。

我看到了不同的解决方案，但非常复杂，我的控制器非常简单，我只想将它们放在不同的文件中，但如果我不打算使用它们，我不想加载控制器。

谢谢。

【问题讨论】：

标签： angularjs angular-ui-router lazy-loading angular-controller

【解决方案1】：

您可能需要 ng-route。这是一个完全符合您要求的模块。（以及其他功能 -> ngRoute。你用下一种方式定义路由。

var app = angular.module('app ', []);
app .config(['$routeProvider',
  function($routeProvider) {
  $routeProvider.
    when('/login', {
      templateUrl: 'login.html',
      controller: 'loginController'
    }).
    when('/home', {
      templateUrl: 'home.html',
      controller: 'homeController'
    }).
  otherwise({
    redirectTo: '/home'
  });
}]);

此外，您必须声明 loginController，但不用担心，如果您更改绑定到的视图，控制器会被销毁，并在您再次打开登录页面时重新创建。

【讨论】：

不..他们仍然需要您事先加载它们..控制器脚本...另一方面，模板可以延迟加载..

【解决方案2】：

我相信您正在寻找的是https://oclazyload.readme.io/。它将动态加载模块。我相信它是建立在 require.js 之上的。

【讨论】：

【解决方案3】：

AngularJS 作为框架的单页应用程序会预先加载其所有视图和代码。这是为了以（位）更大的加载时间为代价提供快速流畅的应用程序。由于代码不打算由 AngularJS 动态加载，因此您不会找到一个干净的解决方案来执行此操作。此外，我首先看不出有任何理由这样做。只要您的应用程序不是最大的应用程序之一，动态加载控制器就没有任何意义。如果您将所有代码放在一个文件中并最小化它，无论如何您都应该在生产环境中这样做，那么加载控制器将是您遇到的最少问题。将所有内容放在一个文件中并通过一个请求获取它比在视图之间动态加载它更快，这就是现在越来越频繁地使用 SPA 架构的原因。

我的建议：不要这样做，不要尝试。就这样是有原因的，而且很好:)

但是，如果您真的想实现这一目标，您唯一的方法就是自己做所有事情：脚本加载、Controller 实例化等

【讨论】：

视图没有预先加载...另一方面，代码可以延迟加载...如果没有预先加载..核心组件，如控制器、模块、指令等（仍然没有所有这些）都被加载，因为应用程序需要它们与应用程序本身一起加载......
是的，你是对的。实际视图不是由角度加载的，而是每个指令（组件）的模板。但是如果你的代码结构是基于组件的，这是我推荐的，无论如何你要预先加载大约 98% 的应用程序（因为实际视图包含的组件不多，但包含一些组件），我仍然不推荐除非您在应用程序启动时遇到真正的性能问题，否则动态加载您的角度代码。这并不适用于几乎所有的应用程序。