javascript - 在 Angular 延迟加载时加载外部模块

Question

我能够在 requirejs 的帮助下延迟加载 angularjs。但是，如何加载需要与 Controller 关联的模块呢？

我在 app.js 中的示例配置如下所示，加载所有提供程序并保留引用。

var app = angular.module('myApp', ['ui.router'])

var cacheProviders = {};

    app.getProvider = function () {
        return cacheProviders.$provide;
    }

    app.getCompileProvider = function () {
        return cacheProviders.$compileProvider;
    }

    app.getControllerProvider = function () {
        return cacheProviders.$controllerProvider;
    }

    app.getFilterProvider = function () {
        return cacheProviders.$filterProvider;
    }

app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
            function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

            (function () {
                cacheProviders.$controllerProvider = $controllerProvider;
                cacheProviders.$compileProvider = $compileProvider;
                cacheProviders.$filterProvider = $filterProvider;
                cacheProviders.$provide = $provide;
            })();

            var lazyCtrlLoad = function (controllerName) {
                return ["$q", function ($q) {
                    var deferred = $q.defer();
                    require([controllerName], function () {
                        deferred.resolve();
                    });
                    return deferred.promise;
                }];
            }
             $stateProvider.state('main.view2b', {
                    url: '/view2b',
                    templateUrl: 'forms/empl/searchEmplForm.html',
                    controllerAs: 'srchC',
                    controller: 'searchEmplCtrl',
                    resolve: {
                        loadOtherCtrl: lazyCtrlLoad('searchEmplCtrl')
                    }
                })

在我的其他模块中，我正在尝试注册 Controller 、加载服务..

define([
        'angular', 'angularResource'
    ], function (angular) {
      angular.module('myApp')
        .getControllerProvider()
        .register(ctrl, ...)

但是，在加载下面的服务时，我需要访问 $resource，它是 angularResource 中 ngResource 模块的一部分。

angular.module('myApp')
    .getProvider().service('deptService', ['$resource', function ($resource) {
        return $resource('/dept/:dept', {dept: '@_dept'});
    }])

如何在延迟初始化 javascript Controller /服务的同时加载 ngResource？

Answer 1

看看 AngularAMD here 。它允许您在 ui-router 中加载 Controller ，而无需使用延迟加载。这个AngularAMD用于集成requireJs和Angular。

$stateProvider
  .state('home', {
    url: '',
    views: {
      '@': angularAmd.route({
        templateUrl: 'ngApplication/application/shared/layouts/basic/basicTplView.html',
        controllerUrl: 'ngApplication/application/shared/layouts/basic/basicTplCtrl.js',
        controller: 'basicTplCtrl'
       }),
      'header@home': angularAmd.route({
         templateUrl: 'ngApplication/application/shared/layouts/header/headerView.html',
         controllerUrl: 'ngApplication/application/shared/layouts/header/headerCtrl.js',
         controller: 'headerCtrl'
       })
    },
});

此外，您使用的是 requirejs，您可以使用 requireJs 的 define 语法加载特定 Controller 的所有依赖项。假设您想在单独的文件中创建一个 loginCtroller，并且该 Controller 依赖于另一个 Angular 服务:

define(['app', 'transformRequestAsFormPostService'], function (app) {
    app.controller('loginCtrl', ['$scope', '$rootScope', '$sce', '$http', '$state', 'transformRequestAsFormPostService', function ($scope, $rootScope, $sce, $http, $state, transformRequestAsFormPost) {

      $scope.login = function () {
        /*do something here using the service*/          
      };
    }]);
});

这里，名为 transformRequestAsFormPostService 的依赖项是另一个文件，我在 main.js(requireJs 配置文件)中定义了它，它的定义方法与 loginCtrol 相同。现在我在我的项目中使用它，到目前为止效果很好。

问候，

埃内斯托