Question

我是棱角分明并尝试学习它，所以我想这是一个非常基本的问题，

我正在尝试使用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>'
    });   
});

我已尝试使用和不带'＃'符号声明'when'，我知道Angular正在加载正常（我有一个控制器，我按照预期运行，我在控制台中没有任何错误）但是我似乎无法使路由工作。

Tnx

Answer 1

你实际上非常接近，首先是你的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模式== false

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/Page解析为/Other/Page。另请注意，在/代码中的链接之前缺少<a>，/表示绝对链接，它将取代您当前的导航树。

Answer 2

如果将$ 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工作

2 个答案: