AngularJS路线和ngview不起作用

Question

我正在准备一个使用AngularJS $route和ng-view的简单演示，请参阅jsFiddle

$routeProvider
    .when('/leftMenu', { templateUrl: 'partials/leftMenu.html', controller: 'dashboardCtrl'})
    .when('/leftMenuCategoryProducts', { templateUrl: 'partials/leftMenu2.html', controller: 'dashboardCtrl2'});

但目前无法使用。

Answer 1

你的小提琴有很多不妥之处：

• 您没有注射$locationProvider，但是您正试图致电$locationProvider.html2mode(true)，这会将我们带到：
• 您正在拨打$locationProvider.html2mode(true)而不是$locationProvider.html5mode(true)
• 您永远不会在您的标记中声明您的应用，即ng-app="onlineStoreApp"
• 您永远不会包含angular-route.js，因此您会收到无法找到的错误
• 您只是将路由功能作为第3个参数传递给模块声明，而不是将其传递给.config()

以下是一个更新的示例：

标记：

<div ng-app="onlineStoreApp">
    <a href="/leftMenu">Menu</a>
    <a href="/leftMenuCategoryProducts">Category</a>
    <a href="/leftMenuCategoryProducts">Category</a>

    <div ng-view></div>
</div>

使用Javascript：

angular
    .module('onlineStoreApp', ['ngRoute'])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/leftMenu', { templateUrl: 'partials/leftMenu.html', controller: 'dashboardCtrl'})
            .when('/leftMenuCategoyProducts', { templateUrl: 'partials/leftMenu2.html', controller: 'dashboardCtrl2'});
    });