Question

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

从我尝试的开始是：

安装ngProgress凉亭模块由凉亭安装ngProgress。

第一种情况

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

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中的新手。请帮助我坚持好几天。

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服务

2 个答案: