用于创建母版页子页面效果的 Angular JS
Posted
技术标签:
【中文标题】用于创建母版页子页面效果的 Angular JS【英文标题】：Angular JS for creating a master page child page effect 【发布时间】：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="" />
</a>
<a href="../partials/Projects.html" class="thumbnail">
<img src="" />
</a>
<a href="../partials/Holidays.html" class="thumbnail">
<img src="" />
</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="/" />，但对我没有任何帮助。请让我知道我在哪里失踪..
【问题讨论】：
【参考方案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() 永远不会指向模板文件以上是关于用于创建母版页子页面效果的 Angular JS的主要内容，如果未能解决你的问题，请参考以下文章
Usercontrol从内容页面的母版页访问Javascript
mvc 母版页问题 我在网前台用一个母版页 其他页面调用母版页都没有问题