AngularJS UI-Router多个页面
SPA是Angular的绝妙之处，但是如果我需要其他与index.html不相关的页面怎么办，具有不同ui视图的UI-Router状态又如何实现呢？
例如，我有 index.html ：
<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body>
<header>
<data-user-profile class="user-profile"></data-user-profile>
</header>
<section class="content-wrapper">
<aside data-main-menu></aside>
<div class="main-content" data-ui-view></div>
</section>
<footer class="row"></footer>
...
</body>
</html>
app.js ：
var app = angular.module('npAdmin', ['ui.router']);
app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: '/app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
.state('crm', {
url: '/crm',
templateUrl: '/app/crm/crm.html',
controller: 'CrmCtrl'
})
...
现在，我需要与index.html完全不同的 login.html （不需要索引的页眉，页脚，侧边栏），但是config
stateProvider仅查找index.html ui视图并按状态更改内容。如何结合login.html？
似乎并不难，但我不明白。
问题答案：
正如您所期望的那样，它并不是那么困难，它有一个plnkr。
诀窍是在特定模板内移动所有视图的通用内容，例如common.html创建抽象状态。换句话说，index.html将保持干净：
<body>
<div ui-view=""></div>
</body>
并且其先前的内容 _（的内容index.html）_将移至common.html。状态定义如下所示：
$stateProvider
.state('common', {
templateUrl: 'tpl.common.html',
abstract: true,
})
.state('dashboard', {
url: '/dashboard',
parent: 'common',
...
})
.state('crm', {
url: '/crm',
parent: 'common',
...
})
.state('login', {
url: '/login',
templateUrl: 'tpl.login.html',
});
$urlRouterProvider.otherwise('/crm');
有趣的 是 （我会说） 我们引入了 没有url的 抽象 状态。因此，所有 当前逻辑将保留 ，仅摘要将充当布局模板的 角色。
在此处查看更多信息：示例
-
问题内容： 我正在将React Router添加到现有项目中。 目前，模型被传递到根组件中，该根组件包含用于子导航的导航组件和主组件。 我发现的React Router的示例只有一个子组件，在不重复两个子组件的情况下更改两个子组件的最佳方法是什么？ 问题答案： 如果我正确理解您的要求，则可以在中定义多个组件。您可以像这样使用它： 另外，请查看 侧边栏 示例应用程序，它应该对您有更多帮助。 编辑：
-
问题内容： 我正在使用角度UI路由器。我的路线配置中包含以下内容 在索引页面中，我只是使用以下方法调用视图： 在我的bulletinBoard.html中，我想要一个嵌套视图： 对于/ newsFeed页面和/ tradeFeed页面，它可以正常工作，但是对于公告板，我看不到页面上的任何内容。我要去哪里错了？ 问题答案： 我发现官方GitHub Wiki上的示例非常不直观。这是一个更好的选择： h
-
多页面的配置如下： 在充值中心配置的路由守卫是想在访问 http://localhost:9000/recharge-center/xxx不存在的页面时重定向到充值中心页面，即 http://localhost:9000/recharge-center，但实际上却会重定向到主页，在控制台也可以看到没有进入充值中心的路由守卫钩子函数，而是进入了主页的钩子函数。 主页的路由: 充值中心的路由: 望解答
-
问题内容： 我正在创建SPA，并尝试使用软件包版本在应用程序中设置“路由” 。 我的路线定义如下： 基本上，我想设置路由，以便对未定义路由的页面的任何请求都转到组件。 如何做到这一点？上面的解决方案在请求页面时同时呈现和组件。 亲切的问候 问题答案： 这是官方教程中的示例，如何避免呈现多条路线
-
问题内容： 我使用React 15.0.2和React Router 2.4.0。我想将多个参数传递给我的路线，但我不确定如何以最佳方式做到这一点： 想要的是这样的： 问题答案： 正如@ alexander-t所提到的： 如果要将它们保留为可选： React Router v4与v1-v3不同，并且可选的路径参数未在文档中明确定义。 而是指示您定义path-to-regexp可以理解的路径参数。这
-
Since 8.1 popTo popTo可以一次回退多级页面 注意：只允许popTo到当前app实例内的页面，不允许跨appId跳转 使用方法 // 关闭当前打开的页面 AlipayJSBridge.call('popTo', { index: -1 }); 代码演示 关闭当前页面并且传递数据 <h1>点击"执行"关闭当前页面并返回数据</h1> <a href="#" class="