在AngularJS中使用不同的主視圖頁面進行狀態

Question

我犯了一個大錯誤，並在我的單頁角度應用程序中在沒有嵌套結構的視圖內設計了整個母版頁及其頁面。 現在，我需要一個結構完全不同的登錄頁面，更改模板和添加根頁面會花費一些時間。

我正在尋找一種導航（或重定向）到我的登錄頁面的方法，但是我希望我的登錄頁面模板適合整個頁面，而不是適合ui視圖內。

這可能嗎？

<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

我想分享我使用的方法。

老實說，我的情況要容易一些，因為我已經只有幾個不同的根源（及其層次結構）。 但是，即使您必須在許多地方這樣做，也可以在以后收獲很多。

有一個正在工作的矮人

因此，訣竅是引入一些超級狀態：

.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',
})

在AngularJS中使用不同的主視圖頁面進行狀態

問題描述

1 個解決方案

解決方案1
5 2015-03-10 17:28:18

在AngularJS中使用不同的主視圖頁面進行狀態

問題描述

1 個解決方案

解決方案1 5 2015-03-10 17:28:18

解決方案1
5 2015-03-10 17:28:18