Question

大家好我在angularjs创建了小型SPA。我在导航栏中有3个链接。当我点击链接而不是每次在同一页面上载时加载不同的页面。下面是我的routeProvder代码：

'use strict';
angular.module('confusionApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider

        // route for the menu page
            .when('/menu', {
                templateUrl : 'menu.html',
                controller  : 'MenuController'   
        })

        // route for the contactus page
            .when('/contactus', {
                templateUrl : 'contactus.html',
                controller  : 'ContactController'
            })

        // route for the dish details page
            .when('/menu/:id', {
                templateUrl : 'dishdetail.html',
                controller  : 'DishDetailController'
            })
            .otherwise('/contactus');

});

和html导航栏代码：

<div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/home">
                        <span class="glyphicon glyphicon-home"
                         aria-hidden="true"></span> Home</a></li>
                    <li><a href="#/menu">
                         <span class="glyphicon glyphicon-list-alt"
                         aria-hidden="true"></span> 
                         Menu</a></li>
                     <li><a href="#/contactus">
                     <i class="fa fa-envelope-o"></i> Contact</a></li>
                </ul>
            </div>

我每次都从错误中意识到，而不是通过＃更改URL，如下所示：

http://127.0.0.1:55846/app/index.html#!/menu

它尝试通过联系我们访问不同的URL：

http://127.0.0.1:55846/app/index.html#!/contactus#%2Fmenu

因此，它只是访问路由提供程序的其他部分并尝试访问URL，因为没有这样的URL，它会重定向到contactus页面。我想知道为什么它无法访问＆＃34; menu＆＃34;？附：当我输入第一个URL手册时，它可以工作。

Answer 1

我已经下载了你的代码并检查了index.html代码中的依赖项，在你调用控制器的行中，你有一个错字：

<script src="scripts/controllers.js"></script>

应该是：

<script src="scripts/controller.js"></script>

希望有所帮助

Answer 2

这里的问题似乎是你正在学习一门课程或遵循角度1的教程，但是你正在尝试阅读使用angular2的文档。我注意到您在您分享的github链接中使用了$scope，并且在angular2的发布中删除了$scope。

我认为要解决这个问题，您需要回到上一次项目工作的时间并将所有内容移除到那一点。然后确保从那里添加到项目时使用的是角度1功能。

Answer 3

正如之前所说的那样是一个版权问题。我写这个可能将来会遇到同样的问题。原因很简单。当您安装角度路线（凉亭安装角度路线-S）时，它会建议您安装两个不同的版本。您必须先选择，因为该部件是基于Angular版本1创建的。角度路径的第二个版本将尝试将模板渲染为角度2组件。因此，您必须为正常渲染模板安装1.4.14版。之后，当您点击菜单项时，它将打开链接http://127.0.0.1:57035/app/index.html#/menu。否则它将尝试通过联系人呈现所有内容，因为它无法找到菜单项。

Answer 4

尝试致电： http://127.0.0.1:55846/app/index.html/#/menu

有关w3school的更多信息。

angularjs单页应用程序URL错误

4 个答案: