Angularコンポーネントが必要な場合に相対パスが見つかりません

Question

バンドルおよびAngularjsフレームワークでBrowserifyを使用しています。

var loginDirective = /*@ngInject*/ function(){ 
    return{ 
    templateUrl:'views/login/templates/loginComponent.html', 
    link:function(scope,ele,attr){ 
    } 
    } 
}; 

私はbrowserify使用して一人でコンポーネントを実行したときにこれは完璧に動作 - シナリオは、私のように定義されたディレクティブを持っているAngularjsコンポーネントを持っている、です。今私は私のプロジェクトのnode_modulesフォルダ内のこのコンポーネントを取得するためにNPMのインストールを使用するプロジェクト "MyAPP"を持っています。 私は、この

var angular = require('angular'); 
require ('baseComponent'); 

module.exports = angular.module('mainComponent',['baseComponent']) 

のように、このCompoNetをを必要とするプロジェクトでDIをやる含まDIが正常に動作しますが、私はそれは私のプロジェクトでviewフォルダを検索を開始原因コンポーネント'views/login/templates/loginComponent.html'を言って、エラーが見つかりませんでした取得それ自身のviewフォルダの代わりに。

この問題を解決するにはどうすればよいですか？

Answer 1

私は一般的な方法は、あなたのJavaScriptコードにテンプレートを入れて、テンプレートキャッシュに手動でロードすることだと思います。このように：

angular.module('mainComponent').run(function($templateCache) { 
    var template = '<h1> LoginComponent </h1>'; 
    $templateCache.put('loginComponent.html' , template); 
}); 

そしてディレクティブでのごtemplateUrlは次のようになります。

var loginDirective = /*@ngInject*/ function(){ 
    return{ 
     templateUrl: 'loginComponent.html', 
     link: function(scope,ele,attr){ 
     } 
    } 
}; 

あなたはUI-ブートストラップ、UIグリッドなどのような多くのオープンソースライブラリでこれを見ることができます