2017-04-15 160 views
0

我只是從製作角度種子基本AngularJS應用程序,它目前擁有:AngularJS路由的路由路徑,而不是加載HTML頁面

  • 的index.html
  • app.js
  • 家/ home.html的
  • 家/ home.js

現在,我想重定向到home.html的,當我在一個項目裏點擊主頁與HREF = 「/家」。這沒關係,但它將我重定向到目錄結構而不是文件。
的文件 -
app.js

'use strict'; 
// Declare app level module which depends on views, and components 
angular 
    .module('mentorSpot', [ 
     'ngRoute', 
     'mentorSpot.home' 
    ]) 
    .config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
     $routeProvider.when('/home', { 
     templateUrl: 'home/home.html', 
     controller: 'HomeCtrl' 
    }); 
     $routeProvider.otherwise({redirectTo: '/home'}); 
    }]); 

家/ home.js

'use strict'; 
angular.module('mentorSpot.home', ['ngRoute']) 
.config(['$routeProvider'], function($routeProvider){ 
     $routeProvider.when('/home', { 
      templateUrl: 'home/home.html', 
      controller: 'HomeCtrl' 
     }); 
    }) 
.controller('HomeCtrl',[function(){ 

}]); 

家/ home.html的

<h1>This is the home page</h1> 

的index.html

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mentorSpot" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>MentorSpot</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
    <link rel="stylesheet" href="app.css"> 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
    <!-- W3.CSS Framework--> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <!-- Fonts --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <!-- jQuery and external JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="hp.js"></script> 
    <script src="https://use.fontawesome.com/d18274d1d9.js"></script> 
    <style> 
     body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif} 
     .w3-navbar,h1,button {font-family: "Montserrat", sans-serif} 
     .fa-anchor,.f 
    </style> 
</head> 
<body> 
    <!-- Navbar --> 
    <ul class="w3-navbar w3-blue w3-card-2 w3-top w3-left-align w3-large"> 
    <li class="w3-quarter w3-center"><h3>MentorSpot.com</h3></li> 
    <li class="w3-hide-small"><a href="#/home" class="w3-padding-large w3-hover-indigo">Home</a></li> 
    <li class="w3-hide-small"><a href="#htutw" class="w3-padding-large w3-hover-indigo">How to use this website?</a></li> 
    <li class="w3-hide-small"><a href="#Catalog" class="w3-padding-large w3-hover-indigo">Courses</a></li> 
    <li class="w3-hide-small"><a href="#RegLog" class="w3-padding-large w3-hover-indigo">Register/Login</a></li> 
    </ul> 
    <div ng-view> 

    </div> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="/home/home.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> 
</body> 
</html> 

This is what index.html looks like

On clicking home in the above menu I get redirected like this

+0

你的錨的'href'應該是'href =「#/ home」',也不要把'html'&'body'標籤放在局部視圖中 –

+0

@PankajParkar我試了一下,沒有任何工作。我將編輯一秒鐘內做出的更改。 –

+0

這是發生在您的節點服務器上,而不是角度。你能發表一個關於服務器上的路由文件的例子嗎? – Claies

回答

1

我覺得這條線是錯誤的,因此你的路由器沒有被配置爲:

.config(['$routeProvider'], function($routeProvider){

它應該是:

.config(['$routeProvider', function($routeProvider){ 

我希望它問題

順便說一句,你應該只定義一次路由。在這個例子中,你正在設置家庭路線兩次。

+0

除此之外,在角度1.6中,'href應該是'「#!/ home」'。 http://plnkr.co/edit/AzqS5EyVcA9INEAjIrgA?p=preview – Claies