在angularjs中路由问题

时间:2015-02-19 05:10:05

标签: angularjs routing

我正在编写一个基本的角度路由代码,如果用户点击显示详细信息,将显示相应的订单ID。我收到错误。我哪里出错了?我添加了一个示例HTML文件。

<html ng-app="sample">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head> 
<body ng-controller="test">
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Order</th>
                    <th>Details</th>    
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="order in orders">
                    <td>{{order.id}}</td>
                    <td>{{order.number}}</td>
                    <td>{{order.details}}</td>
                    <td><a href="#ShowOrder/{{order.number}}">show details</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var sample=angular.module("sample",[]);
    sample.controller("test",function($scope){
        var person1={id:"1",number:"1234",details:"samsung mobile"};
        var person2={id:"2",number:"1235",details:"motorola mobile"};
        var person3={id:"1",number:"1236",details:"MI3 mobile"};
        var person=[person1,person2,person3];
        $scope.orders=person;
    });     
    sample.config(function($routeProvider){
        $routeProvider.when("/ShowOrder/:id",
            {controller:"showOrderCtrl",templateUrl:"template/order.html"});    
    })
    sample.controller("showOrderCtrl",function($scope,$routeParams){
        $scope.order_id=$routeParams.id;
    })      
</script>

1 个答案:

答案 0 :(得分:1)

您需要ngRoute模块

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js

在html中使用此脚本后,将其添加为依赖项

var sample=angular.module("sample",['ngRoute']);