【问题标题】:Issue with routing in angularjsangularjs中的路由问题
【发布时间】:2015-04-20 08:42:44
【问题描述】:

我正在编写一个基本的角度路由代码,如果用户点击显示详细信息,将显示相应的订单 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>

【问题讨论】:

  • 您似乎缺少 angular-route.jsngRoute 对于初学者的模块依赖项。 &lt;script&gt; 标签也应该在 &lt;body&gt; 内。此外,如果没有明确说明错误是什么,就说 “我收到错误” 是没有意义的。
  • 为什么script标签需要在body里面?
  • @YangLi 或&lt;head&gt;,只是在&lt;/body&gt; 之后OP 没有它
  • @Phil 我忘了使用 ng-views 并注入 ng-route,这就是问题所在。它现在工作正常。

标签: angularjs routing


【解决方案1】:

你需要 ngRoute 模块

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-11-09
    • 2014-08-21
    • 2017-05-01
    • 2021-01-01
    • 2013-06-30
    • 1970-01-01
    相关资源
    最近更新 更多