AngularJS路由示例不起作用

Question

AngularJS路由示例不起作用

Roh*_*han 0 html javascript routes angularjs

我正在按照这里的示例:http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/但无法正确工作路由.

建立 :

RoutingExample文件夹
-index.html
-app.js
-templates文件夹
--add_order.html
--show_order.html

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>AngularJS Routing example</title>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

    <style>
    body {
      padding-top: 10px;
      background-color: #F5F5F5;
    }
    </style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body ng-app="sampleApp">

    <div class="container">
    <div class="row">
    <div class="col-md-3">
       <ul class="nav">
        <li><a href="#AddNewOrder"> Add New Order </a></li>
        <li><a href="#ShowOrders"> Show Order </a></li>
      </ul>
    </div>
    <div class="col-md-9">
        <div ng-view></div>
    </div>

    </div>

    </div><!-- /.container -->

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
  <script src="app.js"></script>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

app.js

//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: 'templates/add_order.html',
        controller: 'AddOrderController'
    }).
      when('/ShowOrders', {
        templateUrl: 'templates/show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/AddNewOrder'
      });
}]);


sampleApp.controller('AddOrderController', function($scope) {

    $scope.message = 'This is Add new order screen';

});


sampleApp.controller('ShowOrdersController', function($scope) {

    $scope.message = 'This is Show orders screen';

});

Run Code Online (Sandbox Code Playgroud)

add_order.html

<h2>Add New Order</h2>

{{ message }}a

Run Code Online (Sandbox Code Playgroud)

show_order.html

<h2>Show Orders</h2>

{{ message }}

Run Code Online (Sandbox Code Playgroud)

只要点击相应的链接,我就可以访问show_order.html或add_order.html.但是无论我点击哪个链接,屏幕都会显示add_order.html.我添加了angular-route.min.js,所以我不确定为什么我不能正确路由.任何帮助表示赞赏.

谢谢

Answer 1

Way*_*ery 5

链接应将href设置为#/ShowOrders和#/AddNewOrder:

<li><a href="#/AddNewOrder"> Add New Order </a></li>
<li><a href="#/ShowOrders"> Show Order </a></li>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	287 次
最近记录：	10 年，8 月前