使用ui路由器在AngularJS中路由

Question

我正在使用ui路由器，但它不工作。這裏是我的代碼：

在我的index.html

<li> <a ui-sref="day2">Day 2</a> </li> 
    <li><a ui-sref="day3">Day 3</a></li> 
    <li><a ui-sref="day4">Day 4</a></li> 

我main.js

var myModule = angular.module('myApp', ['ngMessages', 'ui.router']); 
myModule.config(function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise("/day1"); 

     $stateProvider 

     .state('day1', { 
      url: '/day1', 
      templateUrl: 'index.html' 
     }) 
     .state('day1.example', { 
      url: '/theview', 
      template: '<h3>I am a routed view</h3>' 
     }) 

     .state('day2', { 
     url: '/day2', 
     views: { 

      // the main template will be placed here (relatively named) 
      '': { 
      templateUrl: 'day2.html' 
      } 
     } 
     }) 

     .state('day3', { 
     url: '/day3', 
     views: { 

      // the main template will be placed here (relatively named) 
      '': { 
      templateUrl: 'day3.html' 
      }, 

      // the child views will be defined here (absolutely named) 
      'directives@day3': { 
      templateUrl: 'directives.html' 
      }, 

      // for column two, we'll define a separate controller 
      'services@day3': { 
      templateUrl: 'service.html' 
      } 
     } 

     }) 

     .state('day4', { 
     url: '/day4', 
     views: { 
      '': { 
      templateUrl: 'day3.html' 
      } 
     } 

     }); 
    }); 

當我在瀏覽器上的鏈接2天，第3天和第4天點擊它不工作。即使day1.example不工作但我把它稱爲像這樣在我的index.html

<div> 
    <a ui-sref=".example" class="save button">Example</a> 
</div> 
<div ui-view> </div> 
</div> 

我不知道是什麼問題。我已經下載了ui-router縮小文件，所以這不是問題。它實際上是在瀏覽器中檢測第1天的路由file:///Users/Projects/AngularJs/index.html#/day1 我正在關注scotch教程。

我的問題是與templateUrl: 'day2.html當我將其更改爲template: '<h1> Check if it Works </h1>第2天的鏈接工作正常。

Answer 1

不要給index.html頁面添加任何狀態，如果你想添加任何內容然後添加子狀態或使用子頁面。
試試這個： -

var myModule = angular.module('myApp', ['ngMessages', 'ui.router']); 
myModule.config(function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise("/day1"); 

    $stateProvider 

     .state('main', { 
      url: '', 
      abstract: true, 
      templateUrl: 'main.html' 
     }) 

     .state('main.day1', { 
      url: '/day1', 
      templateUrl: 'main.html' 
     }) 
     .state('main.day1.example', { 
      url: '/theview', 
      template: '<h3>I am a routed view</h3>' 
     }) 

     .state('main.day2', { 
      url: '/day2', 
      templateUrl: 'day2.html' 
     }) 

     .state('main.day3', { 
      url: '/day3', 
      templateUrl: 'day3.html' 
     }) 

     .state('main.day4', { 
      url: '/day4', 
      templateUrl: 'day3.html'   
     }); 
    });