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

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

我想分享我使用的方法.

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

有一个工作的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>

最后调整所有状态 - 我们只需要一个设置就可以扩展每个当前/现有的根状态: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',
})