AngularJS - So fügen Sie einem HTML-Element eine App in einem bestimmten Zustand hinzu

Question

So sagen wir, meine App heißt myApp, und der Controller, den ich verwenden möchte, ist MyCtrl. So kann ich diese App in einem div-Tag wie folgt umfassen:

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

Lets sagen, es gibt einige Staaten, und normalerweise würde ich den Router verwenden, um die Zustände der URL wie folgt zuzuordnen: http://example.com/state1 oder http://example.com/state2.

Wenn ich diese App in state2 in das div-Tag aufnehmen möchte, gibt es eine Möglichkeit, dies zu tun? Ich bin irgendwie neu zu kantig, im Grunde will ich in der Lage sein, eine Seite zu bauen, die Teile von verschiedenen Modulen in verschiedenen Teilen der Seite enthält.

Answer 1

können Sie ng-include verwenden: Holt, kompiliert und enthält ein externes HTML-Fragment.

Von Angular docs: 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

Sie an Anwender wollen ui-router dafür. Insbesondere verwenden Sie die Anweisung ui-view, um anzugeben, wo die Vorlage eines Status in die übergeordnete Vorlage oder die Seite übernommen wird.

Answer 3

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

// $ stateProvider in Ihrem Modul und Config-Funktion wie injizieren:

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, 
}); 

})