角度ui-routerの基本的な状態変更

Question

私はAngular JSを初めて使っています。私はui-routerを学んでいます。この基本的な例では、ルーティングを設定できません。

HTML：

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <a clss="navbar-brand" ui-sref="#">Angular Ui router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">home</a></li> 
     <li><a ui-sref="about">about</a></li> 
    </ul> 
</nav> 
<div class="container"> 
    <div ui-view></div> 
</div> 

<script type="text/ng-template" id="home.html"> 
    <div class="jumbotron text-center"> 
     <h1>Welcome</h1> 
     <p>This is the homepage</p> 
    </div> 
</script> 

<script type="text/ng-template" id="about.html"> 
    <div class="jumbotron text-center"> 
     <h1>Welcome</h1> 
     <p>This is the about</p> 
    </div> 
</script> 

とJavaScript：ここ

var routerApp = angular.module('routerApp',['ui.router']); 
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home',{ 
      url:'/home', 
      templateUrl:'home.html' 

     }) 
     .state('about',{ 
      url:'/about', 
      templateUrl:'about.html' 
     }); 
}]); 

がJSFiddleです：

https://jsfiddle.net/shrideep/w6n93mqc/10/

Answer 1

、あなたはここで完全なコードを見ることができます：あなたのJSはどこフックに認識できるようにhttps://jsfiddle.net/w6n93mqc/11/

は基本的に、あなたはng-appディレクティブでルート要素の内側にあなたの角度のアプリケーションを持っている必要あなたのDOMの内部まで。テンプレートに正しくリンクする必要もありました.jsFiddleサイトの場合、templateUrlとの動作がわかりませんが、テンプレートを含むファイルへのパスにする必要があります。ここで

があなたのリンクの有効期限が切れるだけの場合には固定コードです：

テンプレート

<div ng-app="routerApp"> 
    <nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <a clss="navbar-brand" ui-sref="#">Angular Ui router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">home</a></li> 
     <li><a ui-sref="about">about</a></li> 
    </ul> 
    </nav> 
    <div class="container"> 
    <div ui-view></div> 
    </div> 
</div> 

JS

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

routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
    .state('home',{ 
     url:'/home', 
     templateUrl:'home.html' 
    }) 
    .state('about',{ 
     url:'/about', 
     templateUrl:'about.html' 
    }); 
    }]); 

役に立てば幸い！

Answer 2

あなたの状態であなたのtemplateUrlはへのパスでなければなりませんスクリプトタグのidではありません。私はあなたのコードを修正しました