javascript - Angular js : Inject ngProgress service in controller file using MEAN Stack

Question

注意:需要有关 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 的新手。请帮助我，我被困了好几天。

Answer 1

转到 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'
        ]
    },