パーシャルはangularjsをロードしていません

パーシャルをロードしていない理由を教えてください。私はルーティングやレイアウトHTMLページに部分テンプレートを挿入しようとしていますが、ホーム、aboutや連絡先などの特定のハイパーリンクをクリックします。コードのすべての行をチェックしましたが、パーシャルをロードしないと問題の原因が見つかりませんでした。ルートはうまくやっているだけで、ロードされていません。は、ここに私のコードです：app.jsパーシャルはangularjsをロードしていません

<html ng-app="streamApp"> 
    <head> 
     <meta charset="utf-8"> 
     <!-- To ensure proper rendering and touch zooming --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>StreamTest App</title> 
     <!-- load bootstrap and fontawesome --> 
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"> 
     <link rel="stylesheet" href="styles/style.css"/> 
    </head> 
    <body ng-app="streamApp" ng-controller="MainController"> 

    <div id="main"> 

     <!-- including header --> 
     <div ng-include="'views/templates/header.html'"></div> 

     <!-- this is where content will be injected --> 
     <div id="container" style="margin-top: 50px;"> 
      <ng-view></ng-view> 
     </div> 

     <!-- including footer --> 
     <div ng-include="'views/templates/footer.html'"></div> 

    </div> 

    </body> 
    <!-- Scripts --> 
    <script src="node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
    <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script> 
    <script src="app.js"></script> 
    <!-- Scripts End --> 
</html>

index.htmlを

// create the module named streamapp and include ngRoute for routing needs 
var streamApp = angular.module('streamApp',['ngRoute']); 

//configure app's routes 
streamApp.config(['$routeProvider',function ($routeProvider) { 
    $routeProvider 
     //route for the home page 
     .when('/home', { 
      templateURL : 'views/partials/home.html', 
      controller : 'MainController' 
     }) 
     //route for the about page 
     .when('/about', { 
      templateURL : 'views/partials/about.html', 
      controller : 'aboutController' 
     }) 
     //route for the contact page 
     .when('/contact', { 
      templateURL : 'views/partials/contact.html', 
      controller : 'contactController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
}]); 
// create the controller and inject Angular's $scope 
streamApp.controller("MainController", function ($scope) { 
    // create a message to display in our view 
    $scope.home="Welcome Home!"; 
}); 
streamApp.controller("aboutController", function ($scope) { 
    // create a message to display in our view 
    $scope.about="Wanna hear about us! Here you are :)"; 
}); 
streamApp.controller("contactController", function ($scope) { 
    // create a message to display in our view 
    $scope.contact="Don't be shy to contact us!"; 
});

header.html

<header> 
    <nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#home">StreamTEST</a> 
      </div> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#home"><i class="fa fa-home"></i> Home</a></li> 
       <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
       <li><a href="#contact"><i class="fa fa-envelope"></i> Contact</a></li> 
      </ul> 
     </div> 
    </div> 
    </nav> 
</header>

home.html

<div class="jumbotron text-center"> 
    <h1>Home Page</h1> 

    <p>{{ home }}</p> 
</div>

contact.html

<div class="jumbotron text-center"> 
    <h1>About Page</h1> 

    <p>{{ about }}</p> 
</div>

about.html

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ contact }}</p> 
</div>

出典

2017-12-29 Atom

私はデフォルトのハッシュプレフィックスを '！'から変更しました。 app.js内の空の文字列 ''にするにはanglejsを使用しています1.6

$locationProvider.hashPrefix('');

出典

2018-01-01 13:19:21 Atom

あなたの体の要素からng-appを削除します。あなたはすでに外側のhtml要素にそれを持っています。

私はngRouteではなくui-routerを使用しますが、それらは非常に似ています。いくつかのこと。

は、あなたは、あなたの設定し、問題への$ locationProviderを注入する必要があることを意味しており、Html5Modeを設定する必要があります。
```
$locationProvider.html5Mode(true) 
```
あなたはあなたのインデックスの<head>セクションのベースHREFを設定する必要があります。 HTML：
```
<base href="/" > 
```
あなたはまた、あなたのリンクをng-href代わりのhrefをしようとする場合があります。

出典

2017-12-29 22:36:44

Okeyですが、結果は同じです。それが助けになるかどうかは分かりますか？ありがとうございました！ – Atom

私は私の答えを編集しました。お役に立てれば。 –

パーシャルはangularjsをロードしていません

答えて

関連する問題