Question

我正在创建一个角度应用程序，并希望动态加载控制器。我看到你可以使用一个名为ocLazyLoad的模块（在这里找到https://github.com/ocombe/ocLazyLoad）

现在我确信我已经做了我需要做的一切（显然做错了）但是当我尝试运行我的应用程序时，什么都没有加载，浏览器就冻结了。如果我正常加载控制器，它工作正常，整个页面加载。

这是一些代码

app.js

var App = angular.module('MyApp', ['ui.router', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'oc.lazyLoad']);

config.state.js

App.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider',
    function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider) {

        'use strict';

        // enable html5Mode
        $locationProvider.hashPrefix('!').html5Mode(true);

        // defaults to home
        $urlRouterProvider.otherwise('/admin/settings');

        // config ocLazyLoad    
        $ocLazyLoadProvider.config({
            events: true
        });


        App.controller = $controllerProvider.register;
        App.directive = $compileProvider.directive;
        App.filter = $filterProvider.register;
        App.factory = $provide.factory;
        App.service = $provide.service;
        App.constant = $provide.constant;
        App.value = $provide.value;

        // states
        $stateProvider
            .state('admin', {
                url: '/admin',
                abstract: true,
                controller: 'AdminController',
                templateUrl: basePath('admin/admin.html')
            })
            .state('admin.settings', {
                url: '/settings',
                controller: 'SettingsController',
                templateUrl: basePath('admin/settings/settings.html'),
                resolve: {
                    loadController: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load({
                           name: 'admin-settings',
                           files: ['/Scripts/app/components/admin/settings/settings-controller.js']
                        });
                    }]
                }

            });
        });

        function basePath(uri) {
            return '/Scripts/app/components/' + uri;
        };
    }]);

管理员-controller.js

App.controller('AdminController', ['$rootScope', '$scope', '$state', '$localStorage', '$translate', '$timeout', '$window', function ($rootScope, $scope, $state, $localStorage, $translate, $timeout, $window) {
    'use strict';

    //... some code here
}]);

设置-controller.js

App.controller('SettingsController', ['$scope', function ($scope) {
    console.log("settings loaded");
}]);

index.html（使用asp.net MVC）

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title ng-bind="models.helloAngular"></title>
    @Styles.Render("~/Content/css")
    <link rel="stylesheet" href="~/Content/app.css" />
</head>
<body class="layout-boxed">
    <section class="wrapper" ui-view></section>

    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/angular-translate")
    @Scripts.Render("~/bundles/angular-storage")
    @Scripts.Render("~/bundles/app")

</body>
</html>

admin.html

<!-- Main section-->
<section>
    <!-- Page content-->
    <div ui-view autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">

    </div>
</section>

settings.html

<div>here</div>

使用OcLazyLoad动态加载控制器时，AngularJs会冻结

0 个答案: