Question

** - 路由不适用于Angular JS。请帮忙。附加HTML代码和js文件。 - ** 以下是我的HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Routing Examples</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
</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="#ShowOrder">Show Orders</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9">
                <div ng-view>

                </div>
            </div>
        </div>
    </div>

    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="script/app.js"></script>
</body>
</html>


/// <reference path="C:\Dev\WebApplication1\WebApplication1\Scripts/angular.js" />
var sampleApp = angular.module('sampleApp', ['ngRoute']);
//Define Routing 
sampleApp.config(function ($routeProvider) {
    $routeProvider.when('/AddNewOrder', {
        templateUrl: 'templates/AddNewOrder.html',
        controller: 'AddOrderController'
    }).when('/ShowOrder', {
        templateUrl: 'templates/ShowOrder.html',
        controller: 'ShowOrderController'
    });
});

sampleApp.controller('AddOrderController', function ($scope) {
    $scope.message = "This is Add Order screen";
});

sampleApp.controller('ShowOrderController', function ($scope) {
    $scope.message = "This is show Order screen";
});

单击AddNew Order链接时，浏览器地址栏上会填充错误的URL。 http://localhost:63022/Sample1.html#!#AddNewOrder

请在此处提出建议。路由根本无效。

Answer 1

你的链接错了。试试这个：

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

或者根本没有＃/

Angular JS路由不适用于下面的代码。网址

1 个答案: