AngularJS 中的路由

Question

我是 Angular 新手，并试图在我的一个示例应用程序中实现路由，但它不起作用。有人可以指导我做错了什么。这是my sample app 的链接。

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="angular-route@1.2.13" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-route.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-include="" src="'Test.html'"></div>
  <div>
    <ul>
      <li>
        <a ng-href="#/Page1">Go to Page1</a>

      </li>
      <li>
        <a ng-href="#/Page2">Go to Page2</a>

      </li>
    </ul>
  </div>
</body>

</html>

App.js
-------
var app = angular.module('plunker', ['ng-Route']).config(
  function($routeProvider) {
        $routeProvider
            .when('/Page1', {
                templateUrl:'Test.html'
                ,
                    controller: 'MainCtrl'
            }).when('/Page2', {
                templateUrl:'Test1.html' ,
                    controller: 'MainCtrl'
            })
            .otherwise({redirectTo: '/a'});
    });


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

我只是想在一个父页面中调用 2 个不同的页面（Page1，Page2），但它不起作用。

Answer 1

使用路由时需要<ng-view/>。同样在注入时，它是ngRoute 而不是ng-Route

Working demo