Question

我已经检查了Stack溢出和许多其他博客，但我无法解决我在AngularJS代码中的路由问题。我没有收到任何错误，但路由似乎根本没有发生。有人可以帮我解决这个问题吗？主要的index.html就在这里

<!DOCTYPE html>

<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>

<body data-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 data-ng-view></div>
        </div>
    </div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

我已将完整代码上传到Plunker AngularJS Routing

非常感谢任何帮助。

谢谢， Smitha

Answer 1

由于缺少angular-route.js，plunker无法正常工作。但是我能看到你忘记给角度依赖 - ngRoute

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

此官方教程介绍了如何使用路由器https://docs.angularjs.org/tutorial/step_07

我已更新了您的plunker，其中包含了可行的更改

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

主要问题 - 版本mishmash - 上传角度--1.3.x，上传角度溃败 - 1.2-x链接角度到html - 1.0-7

我已将它们更改为cdn 1.3.3

接下来的事情 - 错误的模板链接 - 即使它可以在localhost上工作 - 在plunker中，它不能在模板名称开始之后。

我也改变了它应该在ng-href中开始的链接。

基本上都是。

Answer 2

您需要从templateUrl

中删除/

sampleApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/AddNewOrder', {
    templateUrl : 'add_order.html',
    controller : 'AddOrderController'
}).when('/ShowOrders', {
    templateUrl : 'show_orders.html',
    controller : 'ShowOrdersController'
}).otherwise({
    redirectTo : '/AddNewOrder'
});

}]）;

AngularJS路由器代码无法正常工作

2 个答案: