如何正确地使用角度路由答案

【问题标题】：How to properly route with angular如何正确地使用角度路由
【发布时间】：2017-04-21 08:42:23
【问题描述】：

我对 Angular 很陌生，我正在尝试制作一个简单的应用程序，它使用 ng-view 和 ng-route 切换几个视图。出于某种原因，我单击的每个链接总是将我路由到同一个控制器（HomeController）。

这是我的配置

(function(){
    'use strict';
    angular
        .module('app',['ngRoute'])
        .config(myConfig);

    myConfig.$inject = ['$routeProvider'];

    function myConfig($routeProvider){
        //noinspection JSUnresolvedFunction
        $routeProvider
            .when('/',{
                templateUrl : 'templates/home.html',
                controller : 'HomeController',
                controllerAs : 'vm'
            })
            .when('/shop', {
                templateUrl : 'templates/shop.html',
                controller : 'ShopController',
                controllerAs : 'vm'
            })
            .when('/cart', {
                templateUrl : 'templates/cart.html',
                controller : 'CartController',
                controllerAs : 'vm'
            })
            .otherwise({
                redirectTo: '/'
            });
    }
})();

这是我的 HTML：

<body ng-app="app">
    <div id="site-wrapper">
        <nav>
            <ul>
                <li class="button"><a href="#/home">Home</a></li>
                <li class="button"><a href="#/shop">Shop</a></li>
                <li class="cart"><a href="#/cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
            </ul>
        </nav>
        <ng-view></ng-view>
    </div>
    <script src="js/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
    <script src="js/index.js"></script>
    <script src="controllers/CartController.js"></script>
    <script src="controllers/HomeController.js"></script>
    <script src="controllers/ShopController.js"></script>
</body>

这里有 2 个控制器，例如：

(function(){
    'use strict';
    angular
        .module('app')
        .controller('CartController', CartController);
        CartController.$inject = ['$scope', '$log'];


    function CartController($scope, $log){
        var vm = this;
        $log.info('Cart CTRL loaded');
    }
})();

(function(){
    'use strict';
    angular
        .module('app')
        .controller('HomeController', HomeController);
    HomeController.$inject = ['$scope', '$log'];

    function HomeController($scope , $log){
        var vm = this;
        $log.info('Home CTRL loaded');
    }
})();

【问题讨论】：

代码看起来正确，能否请您添加相同的 plunker/fiddle？
我使用了你的代码并创建了这个 plunker。唯一的区别是我使用模板而不是模板 url。工作得很好plunk
刚刚注意到我的链接有点奇怪，这是索引网址：localhost/Project/#!，商店链接看起来像这样：localhost/Project/#!/#%2Fshop
使用ui.router..这样更好..

标签： angularjs ngroute ng-view ng-controller

【解决方案1】：

快速浏览一下，在我看来，您需要删除 href 网址中的“#”。所以这样做可能对你更有效。

<nav>
    <ul>
            <li class="button"><a href="home">Home</a></li>
            <li class="button"><a href="shop">Shop</a></li>
            <li class="cart"><a href="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
    </ul>
</nav>

【讨论】：

我试过了，还是不行。我的网址看起来有些奇怪，不知何故是 #!被添加到 url 的末尾，并且还添加了 %2F。我认为这就是路由中断或其他原因的原因，网址如下所示：localhost/Project/#!/#%2Fshop
@Morta1 有趣的是 %2F 是一个 / ，它是 url 编码的。因此，它似乎出于某种原因正在对 url 进行编码。我无法从外表看出问题所在。你能把这段代码放在 plnker 中吗？