AngularJS ngRoute按預期工作

我想在我的angularJS頁面中使用ngRoute，但我無法在ng-view中加載我的內容。AngularJS ngRoute按預期工作

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link href="CSS/index.css" rel="stylesheet" /> 
<script src="Scripts/angular.min.js"></script> 
<script src="Scripts/angular-route.js"></script> 
<script src="Scripts/app/index.js"></script> 
</head> 
<body ng-app="app"> 
<header> 
    <a ng-href="#/add-new">Add new</a> 
</header> 
<div ng-view></div> 
<footer> 
    @Copyright 2017 
</footer> 
</body> 
</html>

index.js：

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

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/add-new', { 
     template: 'Some content' 
    }) 
}]);

不知道什麼，我在這裏失蹤。

如果我在$ routeProvider中另外添加條件，它會被加載。請讓我知道我在這裏丟失了什麼，以便我的$ routeProvider.when中的內容被加載到我的ng-view標記中。謝謝

也沒有得到任何控制檯錯誤。

來源

2017-06-20 Manju

嘗試後否則添加'。當（）'這樣的：'$ routeProvider.otherwise（{redirectTo：'/加載新'}）;' –

@FabioPicheli'when'中的內容沒有爲我加載，那是我的問題。在請求URL中，如果我訪問http：// localhost：8080/index.htm＃/ add-new – Manju

您正在使用哪個版本的Angular？ – Mistalis

試試這個

JS：

app.config(function($routeProvider) { 
$routeProvider 
    .when("/", { 
    templateUrl : "index.htm" 
    }) 
    .when("/add-new", { 
    templateUrl : "add.htm" 
    }) 
});

HTML：

<a href="#!add-new">Red</a>

來源

2017-06-20 08:38:29

@Manju如果你可以創建一個有問題的plunkr，那麼它會更容易找到解決方案 –

更改/到！在href值中工作。謝謝 – Manju

您不必爲應用程序的入口點，因此，如果您加載您的應用程序，你不會到具體的網址，你不會看到任何結果。

另外您也可以添加（{redirectTo：「/附加新的」}）或訪問＃/加載新的，看看你的頁面

來源

2017-06-20 08:41:06

添加這下面一行在你HTML頁

<base href="/">

，改變ng-href到href

編輯：

$location在HTML5模式下需要存在<base>標記！如果您在使用ng-href

，則你應該通過$scope對象

來源

2017-06-20 08:41:57

沒錯，但是解釋爲什麼*它是解決方案可能對OP有用。 – Mistalis

哎呀！我有更新我的答案:)謝謝 –

AngularJS ngRoute按預期工作

回答

相關問題