javascript - 在 AngularJS 中使用 ui-router 进行路由

Question

我正在使用 ui-router 但它不起作用。这是我的代码:

在我的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 缩小文件，所以这不是问题。它实际上是在浏览器中检测day1路由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'        
       });
    });