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

时间:2016-02-11 12:16:20

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

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

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

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

感谢。

3 个答案:

答案 0 :(得分: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,但不要担心,如果更改绑定的视图,控制器将被销毁,并在您再次打开登录页面时重新创建。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

AngularJS是一个框架的单页面应用程序预先加载其所有视图和代码。这是为了(一点点)更大的加载时间的成本提供快速和流畅的应用。 由于代码不是由AngularJS动态加载的,因此您无法找到干净的解决方案。 此外,我认为没有任何理由这样做。只要您的应用程序不是最大的应用程序之一,那么动态加载控制器就没有任何意义。 如果您将所有代码放在一个文件中并将其最小化(无论如何应该在生产中执行),加载控制器将是您遇到的最少问题。 将所有内容放在一个文件中并使用一个请求获取它比在视图之间动态加载它更快,这就是SPA架构现在越来越常用的原因。

我的建议:不要这样做,不要尝试。它是出于理由而且它是好的,因为它是:)

然而,如果你真的想要达到这个目的,你唯一的办法就是自己做所有事情: 脚本加载,控制器实例化等