routing - AngularJS State management ->load multiple states in one page -
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page
you need configure router config this:
$stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { url: "/url3", views: { view1: { templateurl: "templates/template7.html", controller: "thirdcontroller" }, view2: { templateurl: "templates/template8.html", controller: "fourthcontroller" }, view3: { templateurl: "templates/template9.html", controller: "fifthcontroller" } });
so need provide information every view in every state: templates views use, controllers, resolves, etc. need give names ui-view containers (in example view1, view2, view3). that's how ui-router know templates , controllers needs use every view container.
and view similar this:
<section class="sidebar left"> <div ui-view="view1"></div> </section> <section class="sidebar right login"> <div ui-view="view2"></div> </section> <div ui-view="view3"></div>
Comments
Post a Comment