module.config에서 어떤 공급자/서비스를 사용할 수 있나요?

StackOverflow https://stackoverflow.com//questions/12664787

  •  11-12-2019
  •  | 
  •  

문제

$document를 사용하여 입력 필드에서 서버 값을 가져오고 싶습니다.

var base_url = $document[0].getElementById('BaseUrl').value;

기본 URL은 템플릿을 가져오는 데 사용됩니다.

var base_url = $document[0].getElementById('BaseUrl').value;

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: base_url + '/partials/instances.html'
});

$document에서 알 수 없다는 오류가 발생하므로 구성에서 사용할 수 없는 것 같습니다.무엇이 사용 가능하고 무엇이 사용 가능하지 않은지 알아낼 수 있는 방법이 있나요?$http를 사용하여 서버에서 데이터를 가져올 수도 있지만 그것도 사용할 수 없습니다.

도움이 되었습니까?

해결책

AngularJS 모듈은 2단계로 부트스트랩됩니다.

  • Configuration phase 여기서는 공급자와 상수만 사용할 수 있습니다.
  • Run phase 여기서 서비스는 등록된 공급자를 기반으로 인스턴스화됩니다.이 단계에서는 상수를 계속 사용할 수 있지만 공급자는 사용할 수 없습니다.

AngularJS 선적 서류 비치 (부분:"모듈 로딩 및 종속성")은 이에 대한 통찰력을 제공합니다.

모듈은 부트 스트랩 프로세스 중에 응용 프로그램에 적용되는 구성 및 실행 블록 모음입니다.가장 간단한 형태 로이 모듈은 두 종류의 블록을 수집하는 것으로 구성됩니다.

구성 블록 - 제공자 등록 중에 실행 및 구성 단계.공급자와 상수만 삽입할 수 있습니다 구성 블록으로.이는 우발적인 인스턴스화를 방지하기 위한 것입니다 서비스가 완전히 구성되기 전의 서비스.

블록 실행 - 인젝터가 생성 된 후 실행되고 응용 프로그램을 시작하는 데 사용됩니다.인스턴스와 상수만 run에 삽입할 수 있습니다. 블록.이는 다음 동안 추가 시스템 구성을 방지하기 위한 것입니다. 응용 프로그램 런타임.

위의 경우 상수와 공급자만 삽입할 수 있습니다( Provider API 문서의 접미사).이는 귀하의 질문에 대한 답변일 수 있지만 템플릿 로드 문제를 해결하는 데는 도움이 되지 않습니다.

HTML에서 단순히 기본 태그를 사용한 다음 절대 경로를 지정하지 않고 단순히 상대 경로(기본에 대한)를 사용할 수는 없는지 궁금합니다.Sth는 다음과 같습니다(베이스가 올바르게 구성된 경우):

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: 'partials/instances.html'
});

다른 팁

질문이 일반적으로 답변 해 왔지만, 여기에 사용 된 구체적인 예를 목표로하는 약간의 첨가물은 다음과 같습니다.

Angular 상수를 사용하여 부분적으로 BaseUL을 정의하는 방법 (또는 서버 값을 나타내는 다른 상수를 정의하고 구성을 위해 사용할 수 있음) : 

// file: app.js
'use strict';

/* App Module */
angular.module( 'myApp', [] )

  // define the templateBaseUrl
  .constant( 'templateBaseUrl', 'themes/angular/partials/' );

  // use it in configuration
  .config(['$routeProvider','templateBaseUrl', function($routeProvider,templateBaseUrl) {
    $routeProvider
      .when( '/posts', {
        templateUrl : templateBaseUrl + 'post-list.html',
        controller  : PostListCtrl
      })
      .when( '/posts/:postId-:slug', {
        templateUrl : templateBaseUrl + 'post-view.html',
        controller  : PostViewCtrl
      })
      .when( '/about', {
        templateUrl : templateBaseUrl + 'about.html',
        controller  : AboutPageCtrl
      })
      .when( '/contact', {
        templateUrl : templateBaseUrl + 'contact.html',
        controller  : ContactPageCtrl
      })
      .otherwise({
        redirectTo: '/posts'
      })
    ;
  }]);
.

제 의견으로는 몇 가지 이점이 있습니다 :

  • 뷰를 이동하면 하나의 위치 로 코드를 업데이트하면 코드 만 업데이트해야합니다.
  • 부분이 프로젝트 레이아웃 내에 깊이 중첩되면 "templatebaseurl"이 전체 경로가 만큼 많은 소음을 유발하지 않습니다.
  • 상대와 절대 경로간에 변경할 수도 있습니다
  • 유사한 질문에 대한 답변 html의 기본 요소의 사용을 제안합니다 각 템플릿에 BaseURL을 붙이는 데 필요한 필요를 제거합니다. 그러나 이것은 또한 웹 사이트의 다른 모든 자원에 영향을 미쳤습니다. 템플릿에 대한 기본 URL 만 구성하는 것은 부작용이 없습니다

    일반적으로, 나는 위와 같은 하드 코딩 된 값 으로이 솔루션을 사용하지 않습니다. 가장 간단한 방식으로 무엇을 해야하는지 보여주는 예일뿐입니다. 서버에서 앱을 복사하려면 App.js 외부의 값을 인덱스 파일에 정의하고 필요한 경로 서버 측을 생성합니다. 

    // file: index.php
<?php
  // only depends on your project layout
  $angularPartialsBaseUrl = 'themes/angular/partials/';
  // this will change when you move the app around on the server
  $themeBaseUrl  = $_SERVER['REQUEST_URI'] . 'themes/angular';
?><!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Yii Blog Demo</title>

    <script>
      var myNS = myNS || {};
      myNS.appConfig = myNS.appConfig || {};
      myNS.appConfig.templateBaseUrl = '<?php echo $angularPartialsBaseUrl; ?>';
    </script>

    <script src="<?php echo $themeBaseUrl; ?>/js/vendor/angular/angular.js"></script>
    <script src="<?php echo $themeBaseUrl; ?>/js/app.js"></script>

</head>

[...]
    .

    및 app.js : 

    // file: app.js
'use strict';

/* App Module */
angular.module( 'myApp', [] )

  // define the templateBaseUrl using external appConfig
  .constant( 'templateBaseUrl', myNS.appConfig.templateBaseUrl );
    .

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top