Question

在大型应用程序中，我们如何在不需要加载index.html的情况下延迟加载模块，控制器和服务。这里我指的是在相关模板html中加载整个js而不是在index.html中。（可能是具有模块，多个控制器，服务，给定功能的指令或具有多个控制器或服务的单个js文件的不同js）

我不想使用RequireJs。但是，我正在寻找角度本身的解决方案。

angular.module( 'my-second-module', ['ui.router'])

.config(function config($stateProvider) {
    $stateProvider
        .state('mainscreen', {
            url: "/mainscreen",
            templateUrl: "app/MyMain.tpl.html"
        })
        .state('mainscreen.sub', {
            url: "/sub",
            controller: 'subCtrl',
            templateUrl: "app/sub.tpl.html"
        })
})
.controller( 'subCtrl', function contractCtrl
    ($scope,$http,$route,$location) {
})
.controller( 'subTwoCtrl', function newContractCtrl($scope,someService,$http,$templateCache) {
.filter('myTypeFilter',function(){
    return function (input,value){       
        return 'Normal';
   };
})
.service('newService', function () {
    var selectedContract = [];
    var hotelObject=[{}];
    return {
        notes:function () {
        },
        addNote:function (noteTitle) {
        }
    };
})
.directive('autocomplete', function($parse) {
return function(scope, element, attrs) {
    var setSelection = $parse(attrs.selection).assign;
    scope.$watch(attrs.autocomplete, function(value) {
        element.autocomplete({
            source: value,
            select: function(event, ui) {
                setSelection(scope, ui.item.value);
                scope.$apply();
            }
        });
    });
};
})
.factory('restService', function(commonService) {
return {
    setReturnMessage: function(res) {
};
})
});

Answer 1

在做了一些研究后发现，AngularJs正计划在2.0版本中实现上述概念。但是，我不确定该版本什么时候发布，而且要发布这个版本还有很长的路要走。

此外，经过更多研究后发现，有一个名为Browserify的框架将成为RequireJS的下一个替代品。我相信我们可以将它用于模块化。但是，我没有用AngularJs对它进行过实验。似乎是一个很好的工具。

这也在ng-conf中讨论过。 Angular with Browserify

PS。如果有人使用Angular和Browserify进行测试，我们欢迎您分享您的经验。

Answer 2

一旦Angular团队发布了角度v2.0，它应该会容易得多，但同时你可以使用我的模块来延迟加载任何东西：ocLazyLoad

如果您对此有任何疑问，请不要犹豫。

没有RequireJS的AngularJs延迟加载

2 个答案: