web-dev-qa-db-ja.com

相対templateUrlを読み込んでいます

モジュラーでスケーラブルなangular=アプリケーションを作成するための最良の方法を探しています。 angular-boilerplate 、 angular-app 、すべての関連ファイルはパーシャルとディレクティブの機能ごとにグループ化されます。

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

ただし、これらすべての例では、テンプレートURLは、現在のファイルではなく、ベースURLを基準にしてロードされます。

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', // this is not very modular
    controller: 'AccountCtrl',
  });
})

これはあまりモジュール化されておらず、大規模なプロジェクトでは保守が難しくなる可能性があります。これらのモジュールを移動するたびに、templateUrlパスを変更することを忘れないでください。次のように、現在のファイルに関連するテンプレートをロードする何らかの方法があればいいでしょう：

templateUrl: './account.tpl.html'

このようなことを角度で行う方法はありますか？

angularjsangularjs-directiveangular-ui-routerangular-template
42
Danny Nelson

最終的には、jsファイルに関連するパスを維持することは、可能であれば困難になると思います。出荷するときには、すべてのjavascriptファイルを1つのファイルに連結したいと思うでしょう。その場合、テンプレートをbaseUrlに対して相対的にしたいでしょう。また、テンプレートをajax経由でフェッチする場合、これはAngularが$ templateCacheに事前にパッケージ化しない限り、デフォルトで行います。サーバーは、jsファイルが既にブラウザに送信されると、それらの場所を認識します。

おそらく、開発中にbaseUrlに対して相対的なものを好まない理由は、サーバーをローカルで実行していないからでしょうか？その場合は、変更します。特にルートで作業する場合は、人生がずっと楽になります。 Grunt をチェックアウトします。このサーバーには非常にシンプルなサーバーがあり、ローカルで実行して Grunt Connect と呼ばれる実稼働セットアップを模倣できます。 Yeoman のようなプロジェクトをチェックアウトすることもできます。これは、Gruntを使用してあらかじめパッケージ化されたフロントエンド開発環境を提供するため、セットアップに多くの時間を費やす必要はありません。 Angular Seed プロジェクトは、ローカル開発用のGruntセットアップの良い例です。

16
Charlie Martin

これを行う最良の方法は、browserify、webpack、TypeScriptなどのモジュールローダーを使用することです。他にもたくさんあります。ファイルの相対的な場所からrequireを行うことができ、トランスフォームまたはパーシャルファイなどのローダーを介してテンプレートをインポートできるという追加のボーナスがあるため、テンプレートのURLを使用する必要はありません。単にrequireを介してテンプレートをインライン化するだけです。

私の古い答えは以下でも利用可能です：

私はまさにこの主題に関する投稿を書き、地元のAngular= Meetupでそれについて話をしました。私たちのほとんどは現在本番でそれを使用しています。

ファイル構造がモジュールで効果的に表現されている限り、非常に簡単です。ソリューションのクイックプレビューを次に示します。完全な記事のリンクが続きます。

var module = angular.module('myApp.things', []);

var all = angular.module('myApp.things.all', [
    'myApp.things',
    'things.someThing',
    'things.someOtherThing',
    'things.someOtherOtherThing',
]);

module.paths = {
    root: '/path/to/this/thing/',
    partials: '/path/to/this/thing/partials/',
    sub: '/path/to/this/thing/sub/',
};

module.constant('THINGS_ROOT', module.paths.root);
module.constant('THINGS_PARTIALS', module.paths.partials);
module.constant('THINGS_SUB', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things',
        url: '/things',
        templateUrl: THINGS_PARTIALS + 'things.html',
    });
});

そして、サブモジュールまたは「相対」モジュールは次のようになります。

var module = angular.module('things.someThing', ['myApp.things']);
var parent = angular.module('myApp.things');

module.paths = {
    root: parent.paths.sub + '/someThing/',
    sub: parent.paths.sub + '/someThing/sub/',
    partials: parent.paths.sub + '/someThing/module/partials/',
};

module.constant('SOMETHING_ROOT', module.paths.root);
module.constant('SOMETHING_PARTIALS', module.paths.partials);
module.constant('SOMETHING_SUB', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things.someThing',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + 'someThing.html',
    });
});

お役に立てれば！

完全な記事： Relative AngularJS Modules

乾杯！

15
tannerlinsley

私はしばらくこの問題を噛んでいました。私はgulpを使用して本番用にテンプレートをパッケージ化しますが、開発に満足しているソリューションを見つけるのに苦労していました。

これは私が終わったところです。以下のスニペットにより、任意のURLを適切に再配線できます。

angular.module('rm').config(function($httpProvider) {

  //this map can be defined however you like
  //one option is to loop through script tags and create it automatically
  var templateMap = {
    "relative.tpl.html":"/full/path/to/relative.tpl.html",
    etc...
  };

  //register an http interceptor to transform your template urls
  $httpProvider.interceptors.Push(function () {
    return {
      'request': function (config) {
        var url = config.url;
        config.url = templateMap[url] || url;
        return config;
      }
    };
  });
});
1
Tom Makin

現在のところ、 systemJs modules loaderを使用して、必要な処理を実行できます。

import usersTemplate from './users.tpl';

var directive = {
   templateUrl: usersTemplate.name
}

ここで良い例を確認できます https://github.com/swimlane-contrib/angular1-systemjs-seed

1
Andzej Maciusovic