使用 require.js 延迟加载 angular 服务

Question

我可以通过执行以下操作来延迟加载控制器，

步骤 1： 添加额外的配置...

rootModule.config([
    "$controllerProvider", function($controllerProvider) {
        rootModule.registerController = $controllerProvider.register;
    }
]);

Step2:根据步骤1中定义的registerController定义控制器

angular.module("rootModule").registerController("authController",
 function ($scope, $location, $rootScope, authService) {
     $scope.userName = "";
     $scope.userPwd = "";
     $scope.authenticate = function ()...

     $scope.testFunction = function ()...

 });

第三步：通过这样做在路由期间加载控制器，

 rootModule
    .config([
        '$routeProvider',
        function ($routeProvider) {
            $routeProvider.when('/',
                {
                    templateUrl: 'templates/Login.html',
                    resolve: {
                        load: ["$q", function($q) {
                            var defered = $q.defer();
                            require(["Controllers/authController"], function() {
                                defered.resolve();
                            });
                            return defered.promise;
                        }]
                    }
                }).

现在，问题是我有一个名为 "authService" 的服务，我想延迟加载它，该怎么做？ 这是服务.. .

define(function() {

angular.module("rootModule").service("authService", function ($http) {
    return {
    /////Something code here//////
   });
});

Answer 1

最后非常简单，感谢 this Dan Wahlin 写的很棒的博客。

要根据路由在运行时间内加载服务，我必须这样做...

第 1 步：在我的根模块（包含路由信息的模块）配置中获取对 $provide.service() 方法的引用...

rootModule.config(["$controllerProvider","$provide",
    "$controllerProvider", "$filterProvider","$compileProvider", function ($controllerProvider, $provide) {
        rootModule.registerController = $controllerProvider.register; //for controllers
        rootModule.registerService = $provide.service; //for services
        rootModule.registerFilter = $filterProvider.register; //for filters
        rootModule.registerDirective = $compileProvider.directive; //for directives
        rootModule.registerFactory = $provide.factory; //for factory
    }
]);

第二步：注册要动态加载的服务

define(function() {
angular.module("rootModule").registerService("reviewReportsService", function () {
    return {
              sampleData: "This is some sample data"
           }
       });
});

第三步：解析服务脚本文件，在各自路由加载时加载

when('/ReviewAndSubmit',
                {
                    controller: "reviewAndSubmitController",
                    templateUrl: "templates/ReviewAndSubmit.html",

                    resolve: {
                        load: ["$q", function ($q) {
                            var defered = $q.defer();
                            require(["Controllers/reviewAndSubmitController"], function () {
                                defered.resolve();
                            });
                            require(["Services/reviewReportsService"], function () {
                                defered.resolve();
                            });
                            return defered.promise;
                        }]
                    }
                })

希望这对某人有所帮助....

使用 require.js 延迟加载 angular 服务

Lazy loading angular services using require.js

lazy-loading

requirejs

angularjs