问题描述
我正在使用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进行依赖注入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!