了解 Angular JS 中的路由答案

【问题标题】：Understanding routing in Angular JS了解 Angular JS 中的路由
【发布时间】：2017-04-15 19:06:57
【问题描述】：

我试图了解为什么此代码不起作用（我正在检查有关此主题的信息，但人们对此问题有不同的答案）。我打了一个非常简单的例子来理解 Plunker 中的路由器，但我做不到......

这是我的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body>
  <div ng-view></div>    

    <a href="#red">Red</a>
    <a href="#green">Green</a>
    <a href="#blue">Blue</a>


  </body>

这是我的 app.js：

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "index.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    })
    .when("/blue", {
        templateUrl : "blue.html"
    });
});

我的red.html/blue.html和green.html都很简单，像这样（每种颜色）：

<p>red!</p>

但它不会更新 ng-view... 另外，我试过这个：

<a href="#/red">Red</a>
<a href="#/green">Green</a>
<a href="#/blue">Blue</a>

什么都没有……

【问题讨论】：

标签： javascript angularjs ngroute

【解决方案1】：

您的代码没有对 angular route 的引用，

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.2.0rc1/angular-route.js"></script>

DEMO

【讨论】：

他有角度库
@myke_11j 我提到了角度路线
纠正我的错误我只看到那 2 行假设你认为他错过了这两行
@myke_11j ok 加粗了 :)