在 AngularJS 中使用不同的母版视图页进行状态

State with A Different Master View Page in AngularJS

本文关键字：视图 状态 AngularJS      更新时间：2023-09-26

我犯了一个大错误，在我的单页角度应用程序中将整个母版页及其页面设计在一个没有嵌套结构的视图中。现在，我需要一个结构完全不同的登录页面，更改模板并添加根页面有点耗时。

我正在寻找一种导航到（或重定向）到我的登录页面的方法，但我希望我的登录页面模板适合整个页面，而不是适合 ui-view。

这可能吗？

<p>I don't want this paragraph in my login</p>
<div ui-view></div>
    var loginState =
        {
        name: 'login',
        url: "/login",
        // root: ? there should be no root for this
        templateUrl: 'app/access/login.html', 
        controller: 'LoginPageController',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'App',
                    files: [
                        "app/LoginPageController.js"
                    ]
                }]);
            }]
        }
    }
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function ($stateProvider, $routeProvider, $locationProvider) {
        $routeProvider.otherwise("/dashboard");
        $stateProvider.state(dashboardState).state(testState)
            .state(loginState)
我想

分享我使用的方法。

老实说，我的情况要容易一些，因为我已经只有几个不同的根（及其层次结构）。但即使你必须在很多地方这样做，你以后也会收获很多。

有一个工作弹道

机

所以，诀窍是引入一些超级状态：

.state('root', {
    abstract: true,
    templateUrl: 'tpl.layout.html',
})

并且<body>的内容将移动到 tpl.layout.html。

Index.html：

  <body>
    <div ui-view=""></div>
  </body>

tpl.layout.html：

<p>I don't want this paragraph in my login</p>
<ul>
      <li><a href="#/home">home</a>
      <li><a ui-sref="parent">parent</a>
      <li><a ui-sref="parent.child">parent.child</a>
      <li><a href="#/login">login</a> special layout page
</ul>
<div ui-view="">
  The target for any child of the "root" state
</div>

最后是所有状态的调整 - 我们必须仅使用一个设置扩展每个当前/现有的根状态： parent: "root", 

.state('home', {
     parent: "root",
     ... // existing state setting
})
.state('parent', {
     parent: "root",
     ... // existing state setting
})
...

虽然任何特殊状态，例如登录都可以从头开始

.state('login', { 
    url: "/login",
    template: '<div>different login <a href="#/home">home</a></div>',
})

在此处检查其运行情况

我们以后能得到什么？好吧，现在我们确实有一个状态，它几乎总是被触发（在我们的例子中除了登录）。因此，我们可以在这个地方下一些决心，并确保每个州都可以拥有

例如，检查此问答（或此更新ui.router父状态中的解析对象的示例）：

.state('root', {
    abstract: true,
    template: '<div ui-view></div>',
    resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
    controller: 'rootController',
})
相关文章：