kann Vorlage nicht laden, um mit UI-Router von Sidebar

zu routen Ich bin ein Newbee zu eckig. In meiner Web-App habe ich eine Seitenleiste in einer UI-Ansicht von der Vorlage in der Indexseite geladen und es gibt eine andere UI-Ansicht, wo ich die Vorlage laden möchte, indem ich auf Links von der Seitenleiste klicke. hier meine Codes und Vorlagen sind ... bitte helft mir ...kann Vorlage nicht laden, um mit UI-Router von Sidebar

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t </head> 
 
\t <body ng-app="testapp" ng-controller="mainCtrl"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-4" ui-view="sidebar"> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-8" ui-view="content"> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> \t 
 

 

 

 
\t <!-- Javascript links and scripts --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script> 
 

 
\t <script type="text/javascript"> 
 
\t \t var app = angular.module('testapp', ['ui.router']); 
 

 
\t \t /*route configuration*/ 
 
\t \t app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){ 
 
\t \t \t \t $urlRouterProvider.otherwise('home'); 
 

 
\t \t \t \t $stateProvider.state('home',{ 
 
\t \t \t \t \t views:{ 
 
\t \t \t \t \t \t 'sidebar':{templateUrl:'sidebar.html'}, \t 
 
\t \t \t \t \t \t 'content':{templateUrl:'default.main.html'}, \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t $stateProvider.state('home.page02',{ 
 
\t \t \t \t \t views:{ 
 
\t \t \t \t \t \t '[email protected]':{templateUrl:'page02.html'}, 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 

 
\t \t \t }]); 
 

 
\t \t /*main controller at index page*/ 
 
\t \t app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) { 
 
\t \t \t $state.go('home'); 
 
\t \t \t 
 
\t \t }]); 
 

 

 
\t </script> 
 

 
\t </body> 
 
</html>

<ul> 
 
\t <li>home</li> 
 
\t <li>page01</li> 
 
\t <li><a href="#" ui-sref=".page02">page02</a></li> 
 
</ul>

<h2>Page 01 is here!</h2>

Quelle

2016-12-27 Debasish Das Gupta

In ui-Routing können wir ui-sref verwenden, die den vollständigen Zustand Namen als Wert zum Beispiel nimmt:

<li><a href="#" ui-sref="home.page02">page02</a></li>

und der Controller sollte wie:

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

     /*route configuration*/ 
     app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){ 
       $urlRouterProvider.otherwise('home'); 

       $stateProvider 
       .state('home',{ 
        views:{ 
         'sidebar':{templateUrl:'sidebar.html'}, 
         'content':{templateUrl:'default.main.html'},      
        } 
       }) 
       .state('home.page02',{ 
        views:{ 
         '[email protected]':{templateUrl:'page02.html'}, 
        } 
       }); 

      }]); 

     /*main controller at index page*/ 
     app.controller('mainCtrl', ['$scope','$state', function ($scope,$state) { 
      $state.go('home'); 

     }]);

Quelle

2016-12-27 10:57:50

danke .... aber meine Lösung ist in der Antwort ... PLZ überprüfen und sagen, ob es korrekt ist ... –

yup ... Ich hoffe, es sollte gut mit der Lösung funktionieren du als Antwort angegeben –

[hier] (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views) ist der Link, der dir helfen kann, in benannte Ansichten zu schauen –

<li><a href="#" ui-sref=".page02">page02</a></li>

ui-sref muss einen Statusnamen enthalten. wenn Sie home.page02 gehen will, sollte es

<li><a href="#" ui-sref="home.page02">page02</a></li>

sein und keine Notwendigkeit, jedes Mal $stateProvider.state() Just do it wie

$stateProvider 
      .state('home', {url: '', template: ''}) 
      .state('home.page02', {url: '', template: ''})

Und named-views Nutzung https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views gehen durch den darin enthaltenen Link zu geben. Es ist genial

Quelle

2016-12-27 10:48:01

danke für den Kommentar –

i änderte das Skript ...

app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider){ 
 
\t \t \t \t $urlRouterProvider.otherwise('home'); 
 

 
\t \t \t \t $stateProvider 
 
\t \t \t \t .state('home',{ 
 
\t \t \t \t \t views:{ 
 
\t \t \t \t \t \t 'sidebar':{templateUrl:'sidebar.html'}, \t 
 
\t \t \t \t \t \t 'content':{templateUrl:'default.main.html'}, \t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t }) 
 
\t \t \t \t .state('home.page02',{ 
 
\t \t \t \t \t views:{ 
 
\t \t \t \t \t \t '[email protected]':{templateUrl:'page02.html'}, 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 

 
\t \t \t }]);

Quelle

2016-12-27 10:59:55

kann Vorlage nicht laden, um mit UI-Router von Sidebar

Antwort

Verwandte Themen