代码之家  ›  专栏  ›  技术社区  ›  F11

AngularJS中的路由

  •  0
  • F11  · 技术社区  · 10 年前

    我刚接触angular,并试图在我的一个示例应用程序中实现Routing,但它不起作用。有人能指导我做错了什么吗 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';
    });
    

    我只是试图在一个父页面中调用两个不同的页面(Page1,Page2),但它不起作用。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Raghavendra    10 年前

    你需要一个 <ng-view/> 当您使用路由时。注射时 ngRoute ng-Route

    Working demo