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

【问题标题】：Angular JS for creating a master page child page effect用于创建母版页子页面效果的 Angular JS
【发布时间】：2016-06-26 21:13:23
【问题描述】：

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

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

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('!');
});

仪表板.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 中，当我对用户进行身份验证并尝试使用以下代码 sn-p 将他重定向到 Dashboard.html 时，它只是在 URL 中附加了 Dashboard.html。

$location.path('DashboardMenu.html')

为此，我在 Dashboard.html 和 locationProvider.html5mode 和 hasprefix 中添加了<base href="/" />，但对我没有任何帮助。请让我知道我在哪里失踪..

【问题讨论】：

标签： angularjs uiview routing

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

尝试改变

$location.path('DashboardMenu.html')

到

$location.path('/')

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

改变

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

到

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

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

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

可能建议你多学习一些教程

【讨论】：

代码 $location.path('DashboardMenu.html') 在 loginService,js 文件中。请参考上面的文件夹结构。我什至将其更改为 location.path('/')。还按照指示更改了 href 值。模板文件中没有控制器。我仍然无法在 ngview 设置为 DashboardMenu,html 的情况下重定向到 Dashboard.html。
服务器是否配置为 html5mode？我真的认为您需要花更多时间学习有关所有这些工作原理的教程。 path() 永远不会指向模板文件