IT story

config () 모듈에 종속성 삽입-AngularJS

hot-time 2020. 12. 28. 22:03
반응형

config () 모듈에 종속성 삽입-AngularJS


현재 app.js에는 다음 경로가 있습니다.

var gm = angular.module('gm', ['gm.services','gm.directives','gm.filters','gm.controllers','ngSanitize']);

gm.config(['$routeProvider', 'Path', function($routeProvider, Path) {

    $routeProvider.when('/login', { 
        templateUrl: Path.view('application/authentication/login.html'), 
        controller: 'authController' 
    });

    $routeProvider.when('/dashboard', { 
        templateUrl: Path.view('application/dashboard/index.html'), 
        controller: 'dashboardController' 
    }); 

    $routeProvider.otherwise({ 
        redirectTo: '/login'
    });

}]);

보시다시피 Path 종속성을 주입하려고합니다. 이 공급자를 찾을 수 없다는 오류가 발생하지만. 구성 모듈 공급자가 다른 것보다 먼저 실행되기 때문이라고 생각합니다. 아래는 "services.js"의 경로 공급자 정의입니다.

gm.factory("Path", function() {
  return {
    view: function(path) {
      return 'app/views/' + path; 
    },
    css: function(path) {
      return 'app/views/' + path; 
    },
    font: function(path) {
      return 'app/views/' + path; 
    },
    img: function(path) {
      return 'app/views/' + path; 
    },
    js: function(path) {
      return 'app/views/' + path; 
    },
    vendor: function(path) {
      return 'app/views/' + path; 
    },
    base: function(path) {
      return '/' + path; 
    }
  }
}); 

이 공급자를 구성 모듈에 어떻게 삽입 할 수 있습니까?


에서는 .config공급자 만 사용할 수 있습니다 (예 :) $routeProvider. .run당신은 단지 서비스 (예 : 인스턴스를 사용할 수 있습니다 $route). 공급자가 아니라 공장이 있습니다. 이를 생성하는 세 가지 방법으로이 스 니펫을 참조하십시오 : 서비스, 공장 및 공급자 그들은 또한 각도 문서 https://docs.angularjs.org/guide/services 에서 이것을 언급합니다.


  1. angular.config 공급자 만 허용
  2. 모든 서비스, 공장 등은 Provider의 인스턴스입니다.

따라서 config에 서비스를 삽입하려면 이름에 'Provider'를 추가하여 서비스 제공자를 호출하면됩니다.

angular.module('myApp')
  .service('FooService', function(){
    //...etc
  })
  .config(function(FooServiceProvider){
    //...etc
  });

angularjs 공급자 문서 에 따르면

... 팩토리 레시피를 정의하면 $get메소드가 팩토리 함수로 설정된 빈 Provider 유형 이 자동으로 생성됩니다.

따라서 다음과 같은 공장 (또는 서비스)이있는 경우 :

.factory('myConfig', function(){
  return {
    hello: function(msg){
      console.log('hello ' + msg)
    }
  }
})

$get반환 된 객체에 액세스하기 전에 먼저 메서드를 사용하여 팩토리를 호출해야 합니다.

.config(function(myConfigProvider){
   myConfigProvider
     .$get()
     .hello('world');
});

이를 위해 상수를 사용해야합니다. 제공자가 아닌 구성 단계에서 주입 할 수있는 유일한 항목이기 때문입니다.

angular.module("yourModule").constant("paths", {
  base: function(){ ... }
});

토론 은 제가 기본적으로 같은 것을 알아 내려고 할 때 도움 되었습니다.

$routeProvider.when('/', {
                templateUrl:'views/main.html',
                controller:'MainController',
                resolve: {
                    recentPosts: ['$q', 'backendService', function($q, backendService){
                        var deferred = $q.defer();
                        backendService.getRecentPosts().then(
                            function(data) {
                                var result = data.result;
                                deferred.resolve(result);
                            },
                            function(error) {
                                deferred.reject(error);
                            }
                        );
                        return deferred.promise;
                    }]
                }
            })

ReferenceURL : https://stackoverflow.com/questions/17485900/injecting-dependencies-in-config-modules-angularjs

반응형