無法使ng-view工作
[英]Can't make ng-view work
問題描述
我是新手，想學習它，所以我想這是一個非常基本的問題，
我正在嘗試使用ng-view，到目前為止沒有成功。
這是我的代碼：
HTML ：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello world</title>
<script src="~/scripts/refernces/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="~/scripts/refernces/angular.min.js"></script>
<script src="~/scripts/refernces/angular-route.min.js"></script>
<script src="../../scripts/App/myApp.js"></script>
</head>
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='#Home'>Home</a></li>
<li><a href='/#About'>About</a></li>
<li><a href='/#Contact'>Contact</a></li>
<li><a href='/#Other'>Other</a></li></ul></div</div></nav>"
<div ng-view></div>
</body>
JS：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("#About", {
template: '<h1>about</h1>'
})
.when("Contact",
{
template: '<h1>Contact</h1>'
});
});
我試過聲明“何時”，帶有和不帶有“＃”符號，並且我知道Angular可以很好地加載（我有一個控制器可以按照我的預期工作，並且控制台中沒有任何錯誤），但是我可以。似乎無法使路由工作。
特納克斯
2 個解決方案
解決方案1
1 2016-02-01 17:26:07
您實際上非常接近，首先，您的html中有一個小錯字：
<<li><a href='/#Other'>Other</a></li></ul></div</div></nav>
^^^ missing end caret
接下來，我們可以討論ngRoute的HTML5模式。 您將HTML5模式顯式設置為true，這意味着angular將嘗試使用您提供的所有鏈接作為實際URL，而不是將URL片段（ #fake/url/here ）附加到當前url並將其用於路由。 區別如下所示：
HTML5模式== true
http://yoursite.com/angularPage/Contact
http://yoursite.com/angularPage/About
HTML5模式==否
http://yoursite.com/angularPage#/Contact
http://yoursite.com/angularPage#/About
查看您的HTML，我猜想由於您使用的是#字符，因此您不想使用HTML5模式，因此我將您的內容修改為如下所示。 請注意我如何更改鏈接以及您的routeProvider。
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='#Home'>Home</a></li>
<li><a href='#About'>About</a></li>
<li><a href='#Contact'>Contact</a></li>
<li><a href='#Other/Page'>Other</a></li></ul></div></div></nav>
<div ng-view></div>
</body>
JS
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$routeProvider.when("/About", {
template: '<h1>about</h1>'
})
.when("/Contact",
{
template: '<h1>Contact</h1>'
})
.when("/Other/Page",
{
template: '<h1>OtherPage</h1>'
});
});
檢查片段語法，而不是routeProvider本質上如何將您的＃Other #Other/Page解析為/Other/Page 。 另請注意， <a>標記中的鏈接之前沒有/ ，其中a /表示絕對鏈接，它將替換您當前的導航樹。
解決方案2
1 已采納 2016-02-01 17:26:33
如果將$ locationProvider.html5Mode設置為true，則需要添加：
<base href="/">
在文檔的開頭。
另外，您不需要使用href中的哈希。
因此，請嘗試以下代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/">
<title>Hello world</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-route.min.js"></script>
</head>
<body ng-app="myApp">
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class='navbar-header'>
<a class='navbar-header' href='Home'>Demo Site</a>
</div>
<div>
<ul class='nav navbar-nav'>
<li class='active'><a href='Home'>Home</a></li>
<li><a href='/About'>About</a></li>
<li><a href='/Contact'>Contact</a></li>
<li><a href='/Other'>Other</a></li>
</ul>
</div
</div>
</nav>
<div ng-view></div>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when("/About", {
template: '<h1>about</h1>'
})
.when("/Contact",
{
template: '<h1>Contact</h1>'
});
});
</script>
</body>
我無法讓ng-view正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.