了解 Angular JS 中的路由

Question

我想了解为什么此代码不起作用（我正在查看有关此主题的信息，但人们对这个问题有不同的答案）。我输入了一个非常简单的示例来理解 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>

但是什么都没有...

Answer 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

了解 Angular JS 中的路由

Understanding routing in Angular JS

javascript

angularjs

ngroute