2015-01-15 1 views
0

Примечание: Нужна помощь в отношении реализации стека MEAN в противном случае в отношении автономного файла html, где я могу просто включить скрипт src в ngprogress.min.js, его рабочий в таком случае.Angularjs: Inject ngProgress service в файле контроллера с использованием MEAN Stack

Начиная с того, что я попытался это:

установлен ngProgress модуль становой по беседке установки ngProgress.

первый сценарий

Пытался получить к нему доступ в мой контроллер по:

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

// getting undefined provider unpr error 

ngProgress.start(); 

}]); 

2 Сценарий

Попробованная использовать его через доступ через службу, взял подсказку от 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(); 

    }]); 

Service Code:

'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 файл пакета, оно не помогло тоже.

Я новичок в среднем стеке. Пожалуйста, помогите Я застрял в течение нескольких дней.

ответ

1

Перейдите в конфигурацию/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' 
     ] 
    }, 
0

Рабочий раствор:

Goto файл: конфиг/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, используя его методы и атрибуты соответственно