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按预期工作

回答

相关问题