注意:需要有关 MEAN 堆栈实现的帮助,否则对于独立的 html 文件,我可以将脚本 src 包含到 ngprogress.min.js,在这种情况下它可以工作。
从我尝试过的开始是:
通过 Bower install ngProgress 安装了 ngProgress Bower 模块。
第一个场景
尝试通过以下方式在我的 Controller 中访问它:
angular.module('articles').controller('ArticlesController', ['ngProgress',function(ngProgress) {
// getting undefined provider unpr error
ngProgress.start();
}]);
第二个场景
尝试通过服务访问来使用它,从 http://www.ng-newsletter.com/posts/d3-on-angular.html 获取提示,这有时有效,我可以在 html 文件中包含 ngprogress.min.js 。但是当使用 ngProgress.start();
时ngProgress 报告未定义。
Controller 代码:
angular.module('articles').controller('ArticlesController', ['ngProgress',function(ngProgress) {
// getting undefined provider unpr error
ngProgress.start();
}]);
服务代码:
'use strict';
angular.module('ngProgress', [])
.factory('progressService', ['$document', '$q', '$rootScope', function($document, $q, $rootScope) {
var d = $q.defer();
function onScriptLoad() {
// Load client in the browser
$rootScope.$apply(function() { d.resolve(window.ngProgress); });
}
// Create a script tag with d3 as the source
// and call our onScriptLoad callback when it
// has been loaded
var scriptTag = $document[0].createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = 'bower_components/ngprogress/build/ngprogress.min.js';
scriptTag.onreadystatechange = function () {
if (this.readyState === 'complete') { onScriptLoad(); }
};
scriptTag.onload = onScriptLoad;
var s = $document[0].getElementsByTagName('body')[0];
s.appendChild(scriptTag);
return {
ngProgress: function() { return d.promise; }
};
}]);
我也尝试过使用packageName.angularDependencies(['ngProgress'])
和packageName.aggregateAssets(js, ngprogress.min.js)
在包的 app.js 文件中,它也没有帮助。
我是 Mean Stack 的新手。请帮助我,我被困了好几天。
最佳答案
转到 config/env/all.js 或在项目文件夹中搜索 all.js
并将 ngprogress.min.js 添加到 assets.lib.js 文件中。
这是它的样子
assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
],
js: [
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js'
]
},
关于javascript - Angular js : Inject ngProgress service in controller file using MEAN Stack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27975159/