使用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'   
     }); 
    });