javascript - Angular.js:使用MEAN Stack在 Controller 文件中注入(inject)ngProgress服务

注意：需要有关MEAN堆栈实现的帮助，否则需要有关独立html文件的帮助，在这里我可以将脚本src包含在ngprogress.min.js中，在这种情况下可以正常工作。

从我尝试过的开始是：

通过Bower install ngProgress安装了ngProgress bower模块。

第一种情况

试图通过以下方式在我的控制器中访问它：

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未定义。

控制器代码：

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; }
        };
    }]);

我也尝试过在包的app.js文件中使用packageName.angularDependencies(['ngProgress'])和packageName.aggregateAssets(js, ngprogress.min.js)，它也没有帮助。

我是Mean Stack中的新手。请帮忙我几天。

最佳答案

转到config / env / all.js或在项目文件夹中搜索all.js，然后将ngprogress.min.js添加到asset.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'
        ]
    },