ui-routerを使用したAngularJSでのルーティング

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がまだ動作していない私は、問題が何であるかわからない

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

私のindex.htmlの中でこのようにそれを求めています。私はすでにui-routerミニファイルをダウンロードしているので、問題はありません。実際にはブラウザの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'   
     }); 
    });