javascript - Angular JS 路由不适用于以下代码。网址

标签 javascript angularjs

** -- 路由在 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";
});

单击“添加新订单”链接时,浏览器地址栏上会填充错误的 URL。 http://localhost:63022/Sample1.html#!#AddNewOrder

请指出这里出了什么问题。路由根本不起作用。

最佳答案

您的链接有误。 试试这个:

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

或者根本没有#/

关于javascript - Angular JS 路由不适用于以下代码。网址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42335933/

相关文章:

javascript 解析不工作 document.getElementsByClassName

HTML5 中的 Javascript 表单验证

javascript - nw-fileDialog 未捕获错误 : [$injector:modulerr]

javascript - AngularJS 无法注入(inject)服务

angularjs - 由于 TypeScript 1.5 包含 ES6 模块,那么还需要 ES6 模块加载器吗?

javascript - 使用 JavaScript 中的 if else 比较输入框中的日期值

javascript - 使用 MeshLambertMaterial 时出错

Javascript 重定向不适用于移动设备

javascript - 在 Jasmine 和 AngularJS 中测试捕获 promise

javascript - 在 HTML 中调用 AngularJS 函数