Question

我的应用程序中需要使用此母版页和子页面功能，它使用HTML并使用AngularJS调用Web Apis。

我在这种情况下遇到路由问题。

用于Route.js中路由的代码：

var MainApp = angular.module('MainApp', ['ngRoute']);
 MainApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/', {
        templateUrl: '../partials/DashboardMenu.html',
        controller: 'DashboardMain'
    })
    .when('/Holidays', {
        templateUrl: '../partials/Holidays.html',
        controller: 'Holidays'
    })
    .when('/Projects', {
        templateUrl: '../partials/Projects.html',
        controller: 'Projects'
    })

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
});

Dashboard.html

<body ng-app="MainApp" ng-controller="DashboardMainController">
<div class="view-animate-container">
    <div ng-view class="view-animate"></div>
</div>

DashboardMenu.html

<div class="container-fluid btn-group">
<div class="row">
    <a href="../partials/MyProfile.html" class="thumbnail">
        <img src="" alt="My Profile" />
    </a>

    <a href="../partials/Projects.html" class="thumbnail">
        <img src="" alt="Projects List" />
    </a>

    <a href="../partials/Holidays.html" class="thumbnail">
        <img src="" alt="Holidays List" />
    </a>
</div>

以下是我的应用程序中的文件夹结构：

用户从登录页面登录后，应将用户重定向到Dashboard.html，默认子视图为DashboardMenu.html

在登录Service.cs时，当我对用户进行身份验证并尝试使用以下代码段将其重定向到Dashboard.html时，它只是将该网址附加到Dashboard.html。

$location.path('DashboardMenu.html')

为此，我在Dashboard.html和locationProvider.html5mode和hasprefix中添加了<base href="/" />，但对我来说没有任何效果。请让我知道我失踪的地方..

Answer 1

听起来您正在尝试使用ngRoute实现某种版本的嵌套视图，但不支持这种视图。我建议使用支持嵌套状态的ui-router。

Answer 2

$location.path()应设置为路由配置中匹配的url值，而不是模板路径

尝试更改

$location.path('DashboardMenu.html')

到

$location.path('/')

与你的href值相同....应该是url而不是模板

Chnge

<a href="../partials/Projects.html" class="thumbnail">

到

<a href="/Projects" class="thumbnail">

注意：确保将服务器配置为使用html5Mode

您还需要从已在路由配置中声明的控制器的路由使用的模板中删除ng-controller。否则，最终会有2个控制器运行实例

可能建议你学习更多教程

Angular JS用于创建母版页子页面效果

2 个答案: