Angular Material Navbarがビューを変更しない

Question

anglejsルーティングが初めてです。 ng-viewはデフォルトページHome.htmlを読み込みます。しかし、別のページに行くときは、ビューを変更しません。私は多くのソリューションを見てきましたが、どれもうまくいかないようです。私はASP .NETコアを使用しています。私のHtmlファイルはすべてwwwrootフォルダにあります。 javascriptファイルはサブフォルダにあります。ここに私のhtml

<md-content class="md-padding"> 
    <md-nav-bar md-selected-nav-item="currentNavItem" 
       nav-bar-aria-label="navigation links"> 
     <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item> 
     <md-nav-item md-nav-sref="#/about" name="about">About</md-nav-item> 
     <md-nav-item md-nav-sref="#/contact" name="contact"> 
      Contact 
     </md-nav-item> 

    </md-nav-bar> 
    <div class="ext-content"> 
     External content for `<span>{{currentNavItem}}</span>`. 
    </div> 

    <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox> 

</md-content> 

<div ng-view></div>' 

は、ここに私のjavascriptです：

var portfolioApp = angular.module('portfolioApp', ['ngMaterial', 'ngRoute']); 

portfolioApp.config(function ($routeProvider) { 
    $routeProvider.when("/", 
     { 
      templateUrl: "/Home.html", 
      controller: "NavigationController" 
     }) 
     .when("/about", 
     { 
      templateUrl: "/About.html", 
      controller: "NavigationController" 
     }) 
     .when("/contact", 
     { 
      templateUrl: "/Contact.html", 
      controller: "NavigationController" 
     }); 
}); 

Answer 1

あなたはmd-nav-href代わりのmd-nav-srefを使用する必要があります。

なぜ？

の一部としてui-srefディレクティブが使用されています。 ui-sref指令をサポートしていないngRouteモジュールを使用しています。 mdNavSrefためdocumentationから

：

UI-ルータの状態は、このリンクをクリックしたときにに移行します。 ui-srefと表示します。このリンクをクリックしたときにに移行する

URL：mdNavHrefためdocumentationから

。 ng-href ui-srefとしてレンダリングします。

この2つのうちの後者が必要です。ここで

は実施例である：

(function() { 
 

 
    'use strict'; 
 

 
    angular.module('portfolioApp', ['ngMaterial', 'ngRoute']) 
 

 
})(); 
 

 
(function() { 
 

 
    'use strict'; 
 

 
    angular.module('portfolioApp').config(function($routeProvider, $locationProvider) { 
 

 
    $locationProvider.hashPrefix(''); 
 
    
 
    // or use the HTML5 History API 
 
    // $locationProvider.html5Mode(true); // this will remove the hashbang altogether 
 

 
    $routeProvider.when("/", { 
 
     template: "Homepage {{HomeCtrl.location}}", 
 
     controller: function() {}, 
 
     controllerAs: 'HomeCtrl' 
 
     }) 
 
     .when("/about", { 
 
     template: "About page", 
 
     controller: function() {} 
 
     }) 
 
     .when("/contact", { 
 
     template: "Contact page", 
 
     controller: function() {} 
 
     }); 
 
    }); 
 

 
})();

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 

 
<!-- Angular Material requires Angular.js Libraries --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 
 

 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 

 
<div ng-app="portfolioApp"> 
 

 
    <md-content class="md-padding"> 
 

 
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> 
 
     <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item> 
 
     <md-nav-item md-nav-href="#/about" name="about">About</md-nav-item> 
 
     <md-nav-item md-nav-href="#/contact" name="contact"> 
 
     Contact 
 
     </md-nav-item> 
 
    </md-nav-bar> 
 

 
    <br> 
 

 
    <div class="ext-content"> 
 
     <span>Current nav item: {{currentNavItem}}</span> 
 
    </div> 
 

 
    <div ng-view class="md-padding"></div> 
 

 
    </md-content> 
 

 
</div>