javascript - 我无法在 Angular Js 文件中加载插件。如何加载它？

Question

在下面的代码中，我使用了 stateProvider 来检索页面并加载源代码中提到的相应插件:

$stateProvider
        .state('dashboard', {
            url: '/dashboard',
            views: {
                '': {templateUrl: 'partials/dashboard/dashboard.html'},
                'topnavbar@dashboard': { templateUrl: 'partials/common/topnavbar.html' },
                'navigation@dashboard': { templateUrl: 'partials/common/navigation.html' },
                'footer@dashboard': { templateUrl: 'partials/common/footer.html' },
                'content@dashboard': {
                    templateUrl: 'partials/dashboard/dashboard-content.html',
                    controller: 'DashboardCtrl as dashboard',
                }
            },
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            name: 'angles',
                            files: ['js/libs/plugins/chartJs/angles.js', 'js/libs/plugins/chartJs/Chart.min.js']
                        },
                        {
                            name: 'angular-peity',
                            files: ['js/libs/plugins/peity/jquery.peity.min.js', 'js/libs/plugins/peity/angular-peity.js']
                        },
                        {
                            serie: true,
                            name: 'angular-flot',
                            files: [ 'js/libs/plugins/flot/jquery.flot.js', 'js/libs/plugins/flot/jquery.flot.time.js', 'js/libs/plugins/flot/jquery.flot.tooltip.min.js', 'js/libs/plugins/flot/jquery.flot.spline.js', 'js/libs/plugins/flot/jquery.flot.resize.js', 'js/libs/plugins/flot/jquery.flot.pie.js', 'js/libs/plugins/flot/curvedLines.js', 'js/libs/plugins/flot/angular-flot.js', ]
                        }
                    ]);
                }
            }
        })
}

请看我在解析属性时是否做错了？

Answer 1

ocLazyLoad#load 没有属性 name .

你必须先predefine the configuration of your modules指定名称和文件:

$ocLazyLoadProvider.config({
    modules: [{
        name: 'angles',
        files: ['js/libs/plugins/chartJs/angles.js', 'js/libs/plugins/chartJs/Chart.min.js']
    }, {
        name: 'angular-peity',
        files: ['js/libs/plugins/peity/jquery.peity.min.js', 'js/libs/plugins/peity/angular-peity.js']
    }, {
        serie: true,
        name: 'angular-flot',
        files: ['js/libs/plugins/flot/jquery.flot.js', 'js/libs/plugins/flot/jquery.flot.time.js', 'js/libs/plugins/flot/jquery.flot.tooltip.min.js', 'js/libs/plugins/flot/jquery.flot.spline.js', 'js/libs/plugins/flot/jquery.flot.resize.js', 'js/libs/plugins/flot/jquery.flot.pie.js', 'js/libs/plugins/flot/curvedLines.js', 'js/libs/plugins/flot/angular-flot.js']
    }]
});

然后就可以加载预定义的配置了:

$ocLazyLoad.load(['angles', 'angular-peity', 'angular-flot']);

最后是你的代码:

$stateProvider
    .state('dashboard', {
        url: '/dashboard',
        views: {
            '': {
                templateUrl: 'partials/dashboard/dashboard.html'
            },
            'topnavbar@dashboard': {
                templateUrl: 'partials/common/topnavbar.html'
            },
            'navigation@dashboard': {
                templateUrl: 'partials/common/navigation.html'
            },
            'footer@dashboard': {
                templateUrl: 'partials/common/footer.html'
            },
            'content@dashboard': {
                templateUrl: 'partials/dashboard/dashboard-content.html',
                controller: 'DashboardCtrl as dashboard',
            }
        },
        resolve: {
            loadPlugin: function($ocLazyLoad) {
                return $ocLazyLoad.load(['angles', 'angular-peity', 'angular-flot']);
            }
        }
    });