angularjs單頁應用程序URL錯誤

Question

嗨，大家好，我在angularjs中創建了小型SPA。 我在navbar中有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 navbar代碼：

<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頁面。 我想知道為什么不能進入“菜單”的路線？ PS，當我輸入第一個URL手冊時，它可以工作。

Answer 1

我已經下載了您的代碼，並檢查了index.html代碼中的依賴項，在您調用控制器的那一行中，您有一個錯字：

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

應該：

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

希望能有所幫助

Answer 2

這里出現的問題是，您正在學習課程或正在學習有關angular1的教程，但隨后您嘗試閱讀使用angular2的文檔。 我注意到您在共享的github鏈接中使用了$scope ，並且在angular2的發行版中刪除了$scope 。

我認為要解決此問題，您需要將項目設置為上一次工作，然后刪除所有內容。 然后確保從那里添加到項目中時，正在使用角度1功能。

Answer 3

如之前所說，這是版本問題。 我正在寫這篇文章，也許將來有人會遇到同樣的問題。 所以原因很簡單。 當您安裝角度路由（bower install angular-route -S）時，它將建議您使用兩個不同的版本進行安裝。 您必須首先選擇，因為零件是基於Angular版本1創建的。第二版本的angular-route將嘗試將模板渲染為angular 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的更多信息。