如何使用ocLazyLoad进行依赖注入

如何使用ocLazyLoad进行依赖注入

本文介绍了如何使用ocLazyLoad进行依赖注入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用ocLazyLoad并且我有一些外部角度库(如 Chart.js pascalprecht.translate 并且我需要在某些路径中延迟加载它们,如您所知,对于常见的角度模块依赖注入应该是:

I'm using ocLazyLoad and I have some external angular libraries (Like Chart.js and pascalprecht.translate) and I need to lazy load them in some routes, as you know, for the common angular module dependency injection should be like:

var angularApp = angular.module('myApp',
     ['oc.lazyLoad', 'pascalprecht.translate', 'chart.js']);

现在,我只需要延迟加载 pascalprecht.translate 在我的 控制器 之一以及延迟加载 chart.js ,in另一个 控制器 ,但我仍然需要将它们添加到 myApp 模块,但我不知道如何注入,我不使用 $ stateProvider

Now, I just need to lazy loading pascalprecht.translate in one of my controllers and also lazy loading chart.js, in another controller, but I still need to add inject them to myApp module but I don't know how to inject and I do not use $stateProvider

我试过我的控制器,我需要chart.js:

//Load here.
//$ocLazyLoad.load('./panel/dist/test.js');
angular.module('myApp', ['chart.js', [
 './panel/dist/static/chart.min.js',
 './panel/dist/static/angular-chart.min.js'
]]);

$ocLazyLoad.load('./panel/dist/static/chart.min.js');
$ocLazyLoad.load('./panel/dist/static/angular-chart.min.js');

但我收到此错误:


推荐答案

首先,您不需要在依赖注入中注入chart.js,这应该是您的模块

First, you do not need to inject chart.js in your dependency injection, this should be your module:

var angularApp = angular.module('myApp', [ 'oc.lazyLoad' ]);

现在,您希望能够访问来自不同控制器的某些库(比方说路线) ,如你所说,你不使用 $ stateProvider 这意味着你不使用 (这是第三方工作的库)路线和网址)

Now, you want to have access to some libraries from different controllers (let's say routes), as you said you do not use $stateProvider which means you do not use ui-router (which is a third-party library to work with routes and URLs).

这是我的建议(只是一个简单的解决方案):

This is my suggestion (just a simple solution):

angularApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        resolve: {
            store: function ($ocLazyLoad) {
                return $ocLazyLoad.load(
                    {
                        serie: true,
                        name: "chart.js",
                        files: [
                            "./static/chart.min.js",
                            "./static/chart-angular.min.js",
                        ]
                    }
                );
            }
        }
    });

        $routeProvider.when('/needs-translate', {
        templateUrl: 'views/needs-translate.html',
        controller: 'translateController',
        resolve: {
            store: function ($ocLazyLoad) {
                return $ocLazyLoad.load(
                    {
                        serie: true,
                        name: "pascalprecht.translate",
                        files: [
                            "./static/translate.js"
                        ]
                    }
                );
            }
        }
    });

    $routeProvider.otherwise({
        redirectTo: '/home'
    });

    // use the HTML5 History API
    $locationProvider.hashPrefix = '!';
    $locationProvider.html5Mode(true);
});

顺便说一句,如果您使用 ui.router ,这个对你有用

By the way, if you are using ui.router, this Github issue would be useful for you

这篇关于如何使用ocLazyLoad进行依赖注入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 01:01