15

我正在學習我的教程AngularUI項目。我讀了關於狀態,嵌套狀態和抽象狀態的所有信息。 問題是我無法理解爲什麼以及何時應該使用抽象狀態?  使用抽象狀態的目的是什麼?

回答

19

抽象狀態確實意味着你寫的狀態不能直接訪問 。抽象國家仍然需要自己的孩子插入。

當我們加載它的孩子的狀態時它被調用。您可以使用抽象狀態來定義頁面的一些初始模式,假設您可以舉例說明您希望顯示用戶配置文件&社交頁面的任何社交媒體網站。爲此你可以有一個abstract的狀態,這將有url: "" &有你的頁面的基本佈局。像headercontent & footer命名的意見。 header & footer命名視圖將被抽象狀態填充&然後孩子將定義內容取決於顯示哪個模塊。/profile將顯示userProfile.html & /social將顯示用戶的社交頁面social.html

配置

app.config(function($stateProvider){ 
    $stateProvider.state("app": 
    { 
    url: "", //you can have the default url here..that will shown before child state url 
    abstract: true, 
    views: { 
     '': { 
      templateUrl: 'layout.html', 
      controller: 'mainCtrl' 
     }, 
     'header': { 
      templateUrl: 'header.html' 
     }, 
     'footer': { 
      templateUrl: 'footer.html' 
     } 
    }, 
    resolve: { 
     getUserAuthData: function(userService){ 
      return userService.getUserData(); 
     } 
    } 

    }) 
    .state("app.profile": { 
     '[email protected]': { 
      templateUrl: 'profile.html', 
      controller: 'profileController' 
     } 
    }) 
    .state("app.social": { 
     '[email protected]': { 
      templateUrl: 'social.html', 
      controller: 'socialController' 
     } 
    }) 
}) 

其他的abstract主要特點是你可以有共同的決心上,通過數據,以供孩子狀態或事件監聽器使用提供繼承自定義數據。你也可以有OnEnter & OnExit就可以確保裝載之前的東西state &而從state

5

如果您不想要一個可以命中\轉換到的狀態,那麼您可以將其設置爲抽象狀態。例如

\A 
\A.B 
\A.B.C 

如果你不希望用戶只需去\A,你應該讓abstract

0

抽象狀態

在有些情況下,我們需要有幾個州提供一些公共信息的情況。爲此,UI-Router提供了指定抽象狀態的可能性。 抽象狀態可以有子狀態,但它們本身不能被激活,也不能轉換到狀態。抽象狀態在其一個子狀態被激活時被隱式激活。 這是很有用的:我們需要在所有的子狀態地址前加一個url 我們需要插入一個帶有自己的ui-view的子模板將填充的模板 我們需要提供已解析的依賴關係(通過resolve)爲了供子狀態使用 我們需要提供繼承的自定義狀態數據以供子狀態或事件使用 抽象狀態是定義指定狀態配置對象中的抽象關鍵字設置爲true。

$stateProvider 

.state('home', { 

    abstract: true, 

    templateURL: 'home.html' 

}) 
3

基本上,抽象狀態幫助你從不同國家移動通用功能到父抽象狀態。

一個典型的例子是處理加載用戶名,本地化設置,元數據的狀態。您不希望用戶重定向到將加載該狀態的狀態。你想,要總是加載,當重定向到每一個國家

/session是抽象的,但 /session/main/session/detail不會。通過依賴關係,會話數據會在轉入maindetail狀態時加載,但您不希望用戶轉到session狀態。