Question

我对角度很陌生，我试图制作一个简单的应用程序，用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');
    }
})();

Answer 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>

如何正确地路由角度

1 个答案: