角度Ui-routerインラインテンプレートがレンダリングされていない

私はAngularに新しく、チュートリアルでThinksterを学習しています。私は角ルーティング - >新しい状態の追加ステップにいます。角度Ui-routerインラインテンプレートがレンダリングされていない

インラインテンプレートを表示するのにui-routerを使用しようとしていますが、テンプレートが表示されません。ここにある私のindex.html（簡略）：

<html> 
    <head> 
    <!-- My js files are loaded here --> 
    </head> 
    <body ng-app='flapperNews'> 

    <div class ='row'> 
     <div class="col-md-6 col-md-offset-3"> 
     <div ui-view></div> 
     </div> 
    </div> 

    <script type="text/ng-template" id="home.html"> 
     <!-- My template written as plain html> 
    </script> 
    </body> 
</html>

そして、これは私のルーティングは、現在app.jsで処理される方法です。

angular.module('flapperNews',['ui.router']) 
.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider){ 
    return; 

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

    $urlRouterProvider.otherwise('home'); 

}]);

それは私の理解は、UI-ルータはURLを解析し、適切なレンダリングすべきであるということですdiv ui-viewタグ内のテンプレート。（Thinksterはタグは「ui-view」でなければならないと言っているが、ui-router docsは別のことを示すように見えた;私は両方を試した）。

マイページが空白になり、コンソールにエラーが記録されません。その価値については、私はローカルファイルだけでチュートリアルをやっています。ルーティングコードを追加したので、私のURLに＃が付いています。つまり、file://blah/blah/FlapperNews/index.html#と私は分かりません。

出典

2016-07-14 user2888805

ng-includeで試してください –

'function（$ stateProvider、$ urlRouterProvider）{'？の直後に 'return;'があるのはなぜですか？あなたはこのような設定をしていませんでした。 – MMhunter

次のコードを試してみるとうまくいくようです。あなたが提供したリンクに基づいています。

ID = "/ home.html" へのid = "home.html"
コメントが閉じていない：<!-- My template written as plain html>
設定機能からreturn;を削除し、私はあなたのコードから一定何
除去コントローラそれ

のための任意のコードが存在しなかったため

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    </head> 
    <body ng-app='flapperNews'> 

     <div class ='row'> 
     <div class="col-md-6 col-md-offset-3"> 
      <div ui-view></div> 
     </div> 
     </div> 

     <script type="text/ng-template" id="/home.html"> 
     test content 
     </script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script> 
     angular.module('flapperNews', ['ui.router']) 
     .config([ 
      '$stateProvider', 
      '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider) { 

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

      $urlRouterProvider.otherwise('home'); 
      }]) 
     </script> 

     </body> 
</html>

出典

2016-07-14 13:50:18 user1121883

ありがとうございました - そのリターンがそこにいかにあったか分かりませんが、私は完全にIDの "/"が不足していました！ 2番目の目に感謝します！ – user2888805

設定機能でreturnを削除してください。

angular.module('flapperNews',['ui.router']) 
.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider){ 

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

    $urlRouterProvider.otherwise('home'); 

}]);

出典

2016-07-14 13:50:11 MMhunter

角度Ui-routerインラインテンプレートがレンダリングされていない

答えて

関連する問題