我只是從製作角度種子基本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>
你的錨的'href'應該是'href =「#/ home」',也不要把'html'&'body'標籤放在局部視圖中 –
@PankajParkar我試了一下,沒有任何工作。我將編輯一秒鐘內做出的更改。 –
這是發生在您的節點服務器上,而不是角度。你能發表一個關於服務器上的路由文件的例子嗎? – Claies