找不到AngularJS頁面。主頁注入指數模板，但沒有其他網頁

我有我的app.js並存儲在該項目的JS文件夾controller.js文件，這裏的每個找不到AngularJS頁面。主頁注入指數模板，但沒有其他網頁

片段app.js

var myApp = angular.module('myApp', ['ngRoute','RouteControllers']); 
myApp.config(["$routeProvider",function ($routeProvider) { 
$routeProvider 

.when("/", { 
    templateUrl: 'templates/home.html', 
    controller: 'HomeController' 
}). 
    when("/about", { 
    templateUrl: 'templates/biography.html', 
    controller: 'BiographyController' 
    }); 
}]);

controller.js

angular.module('RouteControllers', []) 

.controller('HomeController', function($scope) { 

    $scope.title = "Welcome to Website!" 
    console.log("HomeController: I was instantiated!") 

}) 

.controller('BiographyController', function($scope) { 

    $scope.title = "About" 

});

然後，我有我的index.html文件，基礎知識：

<base href="/"> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"  /> 
<link rel="stylesheet" href="css/style.css"> 

<body ng-app="myApp"> 

<a href="/">Home </a> 

<a href="/about"> About </a> 

<div ng-view> </div> 



<script src ="bower_components/angular/angular.min.js"></script> 
<script src="bower_components/angular-route/angular-route.min.js"></script> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controller.js"></script> 

</html>

我的問題是，當我加載頁面（因爲它應該）從主頁上的文字顯示，但然後當我點擊關於我得到下面拿出來代替：「找不到網頁

此規定文件未在本網站上找到。請檢查URL的錯誤，然後重試。爲什麼我看到這個？此頁面由Firebase命令行界面生成。要修改它，請編輯項目配置的公共目錄中的404.html文件。'

在控制檯中的錯誤僅僅是「無法加載資源：服務器與404（）狀態回覆」

我一直在尋找的是什麼問題，但不能找到一個，網址當我點擊的是'http://localhost:5000/about'。

來源

2017-04-04 Haz88

我想你可以從您的href刪除/或以「＃/試試關於」 About – CrazyMac

我認爲你應該使用ui-router，它比ngroute更好 – Akashii

您需要將#添加到您的錨

<a href="#/">Home</a> 
<a href="#/about">About</a>

這會使它的工作原理。此外，你必須以編程方式使用$location服務

.controller('HomeController', ['$scope', '$location', function($scope, $location) { 

    $scope.title = "Welcome to Website!"; 
    console.log("HomeController: I was instantiated!"); 

    $scope.goAbout = function() { 
     $location.path('/about'); 
    }; 
}])

現在你可以使用goAbout funtion在你的模板

<div> 
    <h1>{{title}}</h1> 
    <button ng-click="goAbout()">About us</button> 
</div>

但是，如果你想利用HTML5 mode的優勢做選擇，擺脫#並有更漂亮的網址，至少在支持HTML5 mode的瀏覽器中，那麼您需要在您的代碼中進行一些更新

myApp.config(["$routeProvider", '$locationProvider', 
      function ($routeProvider, $locationProvider) { 
       $locationProvider.html5Mode(true); 
......

注入$locationProvider服務，並設置$locationProvider.html5Mode(true);

如果您不需要<base href="/">標籤，然後使用一個對象像這樣

$locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
});

現在，你的鏈接需要改變

<a href="/">Home</a> 
<a href="about">About</a>

你會有漂亮的網址。請注意，HTML5 mode may need some server side configuration爲了所有的導航重定向到您的index頁面

希望它可以幫助

來源

2017-04-04 14:50:29

找不到AngularJS頁面。主頁注入指數模板，但沒有其他網頁

回答

相關問題