ui-viewでレンダリングテンプレートが使用されない問題

私はまだAngularのui-routerをSPAに使用するのに新しい経験があり、ブラウザでレンダリングされていないテンプレートに問題があります。以下はapp.jsのための私のコードで、ui-viewでレンダリングテンプレートが使用されない問題

angular.module('myApp', ['ui.router']) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
     // route for the home page 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'views/header.html' 
       } 
      } 
     }); 

    $urlRouterProvider.otherwise('/'); 

})

そして、ここでは私のHTMLで、

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Will this work?</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <link rel="stylesheet" href="bower_components/bootswatch-dist/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="css/mystyles.css"/> 
</head> 

<body> 
    <div ui‐view="header"></div> 
</body> 

<script src="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="scripts/app.js"></script> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

</html>

はまたheader.htmlのためのコードを提供しようと、

<header> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse" id="navbar-main"> 
       <ul class="nav navbar-nav"> 
        <li class="active"> 
         <a href=""><span class="glyphicon glyphicon-home"></span> Home</a> 
        </li> 
        <li> 
         <a href=""><span class="glyphicon glyphicon-info-sign"></span> About</a> 
        </li> 
        <li> 
         <a href=""><span class="glyphicon glyphicon-envelope"></span> Contact</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</header>

にノー受け取りますWebコンソールのエラーメッセージ。空の画面です。

出典

2017-02-01 user13317

あなたはこれからプランカを作成する必要があります。 – rakemen

@rakemen https://plnkr.co/edit/mLNxL9uBa2osqnvUn8oY?p=preview – user13317

私は自分のコードを自分のコードに再現しようとしましたが、意外にもうまくいきました。私はいくつかのスタイルシートを削除しました。意図はコードを動作させることでした。私は、あなたがインポートしたスクリプト（bower_components）に何らかの問題があると思われます。私はplunkrの外部ライブラリツールを使ってスクリプトをインポートしましたが、それ以外のコードはあなたと同じです。あなたのコードで

いくつかの問題：

は、bodyタグ内のインポートスクリプトを入れていない外。
あなたがコメントに投稿した大声で、あなたはAngular2をインポートしましたが、AngularJSはインポートしていません。

script.js：

angular.module('myApp', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'header.html' 
       } 
      } 
     }); 
    $urlRouterProvider.otherwise('/'); 
})

このplunkアウトを確認してください。

出典

2017-02-01 16:13:36 rakemen

ui-viewでレンダリングテンプレートが使用されない問題

答えて

関連する問題