无法使 ng-view 工作

Question

我是 angular 的新手，正在尝试学习它，所以我想这是一个非常基本的问题，

我正在尝试使用 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 加载正常（我有一个控制器可以按预期运行，但我没有控制台中有任何错误）但我似乎无法使路由正常工作。

谢谢

Answer 1

你实际上非常接近，首先，你的 html:

中有一个小错字

<<li><a href='/#Other'>Other</a></li></ul></div</div></nav>
                                              ^^^ missing end caret

接下来说说ngRoute的HTML5模式。您将 HTML5 模式明确设置为 true，这意味着 angular 将尝试使用您提供的所有 link 作为实际 URL，而不是附加一个 URL 片段 (#fake/url/here) 到当前 url 并将其用于路由。差异如下所示：

HTML5模式==真

http://yoursite.com/angularPage/Contact
http://yoursite.com/angularPage/About

HTML5模式==假

http://yoursite.com/angularPage#/Contact
http://yoursite.com/angularPage#/About

看你的HTML，我猜你用的是#字符，不想用HTML5模式，所以我把你的东西改成这样这个。请注意我是如何更改 links 和您的 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> 标签中 link 之前缺少 /，/ 表示绝对 link，它将取代您当前的导航树.

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 工作

Can't make ng-view work

javascript

angularjs

ng-view