Angularjs：使用 MEAN Stack 在控制器文件中注入 ngProgress 服务

Question

注意： 在 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 得到提示，有时我可以将 ngprogress.min.js 包含在 html 文件中。但是随后在使用 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.Please 帮助我被困了好几天。

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

Answer 2

有效的解决方案是：

转到文件：config/assets.json

在各自的数组中包含 ngProgress css 和 js，例如：

{
  "core": {
    "css": {
      "bower_components/build/css/Dist. min. css": [
        "bower_components/ngprogress/ngProgress.css"
      ]
    },
    "js": {
      "bower_components/build/js/dist.min.js": [
        "bower_components/jquery/dist/jquery.min.js",
        "bower_components/angular/angular.js",
        "bower_components/angular-mocks/angular-mocks.js",
        "bower_components/angular-cookies/angular-cookies.js",
        "bower_components/angular-resource/angular-resource.js",
        "bower_components/angular-ui-router/release/angular-ui-router.js",
        "bower_components/angular-bootstrap/ui-bootstrap.js",
        "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
        "bower_components/ngprogress/build/ngProgress.js"
      ]
    }
  }
}

转到控制器测试或处理 ngProgress 对象：

注入服务依赖和模块依赖，成功获取 ngProgress 对象后相应地使用它的方法和属性

     angular.module('mean.articles',['ngProgress']).controller('ArticlesController', ['ngProgress',function(ngProgress) {

            ngProgress.start();
            ngProgress.set(40);

            }]);

Angularjs：使用 MEAN Stack 在控制器文件中注入 ngProgress 服务

Angularjs : Inject ngProgress service in controller file using MEAN Stack

javascript

angularjs

mean-stack