Question

您可以帮助我了解如何在视图之前的示例中加载控制器吗？看起来好像是在控制器尚未加载时立即加载视图。

//app.js
$stateProvider.state('index', {
    url: "/",
    views: {
        "topMenu": {
            templateUrl: "/Home/TopMenu",
            controller: function($scope, $injector) {
                require(['controllers/top-menu-controller'], function(module) {
                    $injector.invoke(module, this, { '$scope': $scope });
                });
            }
        }
    }
});

//top-menu-controller.js
define(['app'], function (app) {
    app.controller('TopMenuCtrl', ['$scope', function ($scope) {
        $scope.message = "It works";
    }]);
});

//Home/TopMenu
<h3>TopMenu</h3>
<div ng-controller="TopMenuCtrl">
    {{message}}
</div>

Answer 1

我created working plunker在这里。

我们有 index.html ：

<!DOCTYPE html>
<html>
  <head>
    <title>my lazy</title>    
  </head>

  <body ng-app="app">

      <a href="#/home">#/home</a>     // we have three states - 'home' is NOT lazy
      <a href="#/">#/</a>  - index    // 'index' is lazy, with two views
      <a href="#/other">#/other</a>   // 'other' is lazy with unnamed view

    <div data-ui-view="topMenu"></div>        
    <div data-ui-view=""></div>

    <script src="angular.js"></script>           // standard angular
    <script src="angular-ui-router.js"></script> // and ui-router scritps

    <script src="script.js"></script>            // our application

    <script data-main="main.js"                  // lazy dependencies
        src="require.js"></script>

  </body>    
</html>

让我们观察main.js - RequireJS配置：

require.config({

    //baseUrl: "js/scripts",
    baseUrl: "",

    // alias libraries paths
    paths: { 

        // here we define path to NAMES
        // to make controllers and their lazy-file-names independent

        "TopMenuCtrl": "Controller_TopMenu",
        "ContentCtrl": "Controller_Content",
        "OtherCtrl"  : "Controller_Other",
    },

    deps: ['app']
});

实际上，我们只为ControllerNames及其Controller_Scripts.js文件创建别名（路径）。而已。 此外，我们返回要求应用程序，但我们将在以后使用不同的功能 - 注册延迟加载的控制器。

deps: ['app'] 是什么意思？首先，我们需要提供文件 app.js （'app'表示查找app.js）：

define([], function() {

  var app = angular.module('app');
  return app; 
})

这个返回值是我们在每个异步加载文件中可以要求的值

define(['app'], function (app) {
    // here we would have access to the module("app")
});

我们如何懒洋洋地加载控制器？正如ngRoute

已经证明的那样

angularAMD v0.2.1

angularAMD是一个实用程序，它有助于在AngularJS应用程序中使用RequireJS，支持按需加载第三方模块，例如angular-ui。

我们将询问角度以获取对$controllerProvider的引用 - 并在以后使用它来注册控制器。

这是 script.js 的第一部分：

// I. the application
var app = angular.module('app', [
  "ui.router"
]);


// II. cached $controllerProvider
var app_cached_providers = {};

app.config(['$controllerProvider',
  function(controllerProvider) {
    app_cached_providers.$controllerProvider = controllerProvider;
  }
]);

正如我们所看到的，我们刚刚创建了应用“应用”，并创建了持有者 app_cached_providers （遵循angularAMD风格）。在配置阶段，我们要求$controllerProvider的角度并保留对它的引用。

现在让我们继续 script.js ：

// III. inline dependency expression
app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
      .otherwise("/home");

    $stateProvider
      .state("home", {
        url: "/home",
        template: "<div>this is home - not lazily loaded</div>"
      });

    $stateProvider
      .state("other", {
        url: "/other",
        template: "<div>The message from ctrl: {{message}}</div>",
        controller: "OtherCtrl",
        resolve: {
          loadOtherCtrl: ["$q", function($q) { 
            var deferred = $q.defer();
            require(["OtherCtrl"], function() { deferred.resolve(); });
            return deferred.promise;
          }],
        },
      });

  }
]);

以上部分显示了两个州的声明。其中之一 - 'home'是标准的懒惰之一。它的控制器是隐含的，但可以使用标准。

第二个是名为"other"的状态，它定位了未命名的视图ui-view=""。在这里我们可以首先看到，懒惰的负载。在解决 （请参阅:)

内部

Resolve

您可以使用resolve为控制器提供自定义状态的内容或数据。 resolve是一个可选的依赖关系图，应该注入控制器。

如果这些依赖项中的任何一个是承诺，它们将被解析并在实例化控制器之前转换为值并触发$ stateChangeSuccess事件。

在我们的套件中，我们知道，一旦完成解析，将在角度存储库中搜索控制器（按其名称）：

// this controller name will be searched - only once the resolve is finished
controller: "OtherCtrl",
// let's ask RequireJS
resolve: {
  loadOtherCtrl: ["$q", function($q) { 
    // wee need $q to wait
    var deferred = $q.defer();
    // and make it resolved once require will load the file
    require(["OtherCtrl"], function() { deferred.resolve(); });
    return deferred.promise;
  }],
},

好，现在，如上所述，主要包含此别名def

// alias libraries paths
paths: {       
    ...
    "OtherCtrl"  : "Controller_Other",

这意味着，将搜索并加载文件“Controller_Other.js”。这是魔法的内容。这里最重要的是使用先前缓存的对$controllerProvider

的引用

// content of the "Controller_Other.js"

define(['app'], function (app) {
    // the Default Controller
    // is added into the 'app' module
    // lazily, and only once
    app_cached_providers
      .$controllerProvider
      .register('OtherCtrl', function ($scope) {
        $scope.message = "OtherCtrl";
    });        
});

诀窍不是使用app.controller()而是

`$controllerProvider.Register`

Angular使用$ controller服务来创建新的控制器。此提供商允许通过 register() 方法注册控制器。

最后还有另一个州定义，更加狭隘的决心......试图让它更具可读性：

// IV ... build the object with helper functions
//        then assign to state provider    
var loadController = function(controllerName) {
  return ["$q", function($q) {
      var deferred = $q.defer();
      require([controllerName], function() {deferred.resolve(); });
      return deferred.promise;
  }];
}    

app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    var index = {
        url: "/",
        views: {
          "topMenu": {
            template: "<div>The message from ctrl: {{message}}</div>",
            controller: "TopMenuCtrl",
          },
          "": {
            template: "<div>The message from ctrl: {{message}}</div>",
            controller: "ContentCtrl",
          },
        },
        resolve : { },
    };        
    index.resolve.loadTopMenuCtrl = loadController("TopMenuCtrl");
    index.resolve.loadContentCtrl = loadController("ContentCtrl");

    $stateProvider
      .state("index", index);          
}]);

上面我们可以看到，我们为该状态的两个/所有命名视图解析了两个控制器

就是这样。这里定义的每个控制器

paths: { 
    "TopMenuCtrl": "Controller_TopMenu",
    "ContentCtrl": "Controller_Content",
    "OtherCtrl"  : "Controller_Other",
    ...
},

将通过resolve和$controllerProvider加载 - 通过RequireJS - 懒洋洋地加载。检查所有here

类似的Q＆amp;答：AngularAMD + ui-router + dynamic controller name?

Answer 2

在一个项目中，我使用延迟加载控制器，并且必须手动调用范围上的$ digest才能使其正常工作。我猜这种行为不会随着ui-router而改变。你试过吗？

define(['app'], function (app) {
  app.controller('TopMenuCtrl', ['$scope', function ($scope) {
    $scope.message = "It works";
    $scope.$digest();
  }]);
});

带有requirejs的angular-ui-router，延迟加载控制器

2 个答案:

angularAMD v0.2.1

Resolve

`$controllerProvider.Register`