12

$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 を使用してサーバーからデータを取得することもできますが、それも利用できません。

4

2 に答える 2

16

AngularJS モジュールは 2 つのフェーズでブートストラップされます。

  • Configuration phaseプロバイダーと定数のみが利用可能です。
  • Run phase登録されたプロバイダーに基づいてサービスがインスタンス化されます。このフェーズでは、定数は引き続き使用できますが、プロバイダーは使用できません。

AngularJS のドキュメント(セクション:「モジュールの読み込みと依存関係」) は、これについての洞察を提供します。

モジュールは、ブートストラップ プロセス中にアプリケーションに適用される構成および実行ブロックのコレクションです。最も単純な形式では、モジュールは 2 種類のブロックのコレクションで構成されます。

構成ブロック- プロバイダーの登録および構成フェーズ中に実行されます。構成ブロックに挿入できるのは、プロバイダーと定数のみです。これは、サービスが完全に設定される前に、サービスが偶発的にインスタンス化されるのを防ぐためです。

実行ブロック- インジェクターが作成された後に実行され、アプリケーションのキックスタートに使用されます。実行ブロックに挿入できるのは、インスタンスと定数のみです。これは、アプリケーションの実行時にさらにシステムが構成されないようにするためです。

上記を考えると、定数とプロバイダーのみを注入できます ( ProviderAPI ドキュメントで接尾辞でマークされています)。これはおそらくあなたの質問に答えますが、テンプレートの読み込みの問題を解決するのには役立ちません...

HTML で単純に base タグを使用して、絶対パスを指定せずに単純に (base への) 相対パスを使用することはできないのでしょうか? 次のように (ベースが正しく構成されている場合):

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: 'partials/instances.html'
});
于 2012-09-30T20:55:41.383 に答える
16

質問は一般的に回答されていますが、質問で使用されている具体的な例を対象とした少しの追加があります。

角度定数を使用してパーシャルの baseUrl を定義する方法 (または、サーバーの値を表す他の定数を定義し、構成に使用できるようにする方法):

// 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'
      })
    ;
  }]);

私の意見では、これにはいくつかの利点があります。

  • ビューを移動する場合は、コードを 1 か所で更新するだけで済みます
  • パーシャルがプロジェクト レイアウト内で深くネストされている場合、「templateBaseUrl」はパス全体ほど多くのノイズを引き起こしません。
  • 相対パスと絶対パスの間で変更することもできます
  • 同様の質問に対する回答では、html の base 要素を使用して、各 templateUrl の前に baseUrl を追加する必要をなくすことを提案しています。しかし、これは Web サイト上の他のすべてのリソースにも影響を与えました。テンプレートのベース 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 );
于 2012-10-19T20:22:39.530 に答える