AngularJS - HTML要素に特定の状態のアプリケーションを追加する方法

Question

私のアプリケーションはmyAppと呼ばれ、私が使用したいコントローラはMyCtrlです。だから私はこのようなdivタグで、このアプリを含めることができますhttp://example.com/state1またはhttp://example.com/state2：

<div ng-app="myApp" ng-controller="MyCtrl"> 
</div> 

は、いくつかの状態があると言うと、通常私はこのようなURLに状態をマップするためにルータを使用することができます。

state2のこのアプリをdivタグに含めるには、これを行う方法はありますか？私はちょっと新しく角度をつけていますが、基本的には、ページの異なる部分に異なるモジュールを含むページを構築できるようにしたいと考えています。

Answer 1

ng-includeを使用すると、外部HTMLフラグメントを取得、コンパイル、および組み込みます。

角度のドキュメントから：AngularJS API

<div ng-controller="ExampleController"> 
    <select ng-model="template" ng-options="t.name for t in templates"> 
    <option value="">(blank)</option> 
    </select> 
    url of the template: <code>{{template.url}}</code> 
    <hr/> 
    <div class="slide-animate-container"> 
    <div class="slide-animate" ng-include="template.url"></div> 
    </div> 
</div> 

Answer 2

あなたはそのために、ユーザui-routerになるでしょう。具体的には、ui-viewディレクティブを使用して、状態テンプレートがその親テンプレートまたはページに入る場所を指定します。

Answer 3

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <div ui-view> 
    //here goes your states 
    </div> 
</div> 

//のようなあなたのモジュールとコンフィグ機能で$ stateProviderを注入：

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/home'); 

$stateProvider.state("home.state1",{ 
    url:"home/state1" 
    templateUrl:templatename.html, 
    controller:MyCtrl, 
}).state("home.state2",{ 
    url:"home/state2" 
    templateUrl:templatename.html, 
    controller:MyCtrl, 
}); 

}）