Question

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

我正在寻找一种导航（或重定向）到我的登录页面的方法，但我希望我的登录页面模板适合整个页面而不是适合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)

Answer 1

我想分享我使用的方法。

老实说，我的情况稍微容易一些，因为我已经只有很少的不同根（以及它们的层次结构）。但即使你必须在很多地方这样做，你也可以获得很多。

有a working plunker

所以，诀窍是介绍一些超级状态：

.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>

最后调整所有状态 - 我们必须只使用一个设置扩展每个当前/现有 root 状态： 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>',
})

检查行动here

我们以后可以获得什么？好吧，现在我们确实有一个状态，它几乎总是被触发（除了在我们的情况下登录）。所以我们可以在这个地方放置一些决心，并确保每个州都有

请检查此Q & A（或此Updating resolved objects in ui.router parent states示例），例如：

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

在AngularJS中使用不同的主视图页面

1 个答案: