web-dev-qa-db-fra.com

quel est le but d'utiliser l'état abstrait?

Je travaille actuellement sur mon projet AngularUI . Je lis tout sur les états, les états imbriqués et les états abstraits . Le problème est que je ne comprends pas pourquoi et quand utiliser un état abstrait? 

angularjsroutingangular-ui-routersingle-page-applicationangularjs-routing
15
Michael

L'état abstrait signifie que l'état que vous avez écrit ne peut pas être accessible directement. Les États abstraits ont encore besoin des leurs pour que leurs enfants puissent s'y brancher. 

On l'appelle quand on charge l'état de son enfant. Vous pouvez utiliser l'état abstrait pour définir un motif initial de votre page. Supposons que vous puissiez prendre un exemple de Tout site de réseau social sur lequel vous souhaitez afficher le profil de l'utilisateur et la page sociale. Pour cela, vous pouvez avoir un état abstract, qui aura url: "" & une présentation de base de votre page. Comme header, content & footer vues nommées. header & footer La vue nommée sera remplie par l'état abstrait et ensuite, l'enfant définira le contenu du contenu en fonction du module affiché. /profile affichera le userProfile.html & /social affichera la page sociale d'un utilisateur social.html.

Config 

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": {
      'content@app': {
          templateUrl: 'profile.html',
          controller: 'profileController'
      }
  })
  .state("app.social": {
      'content@app': {
          templateUrl: 'social.html',
          controller: 'socialController'
      }
  })
})

Une autre caractéristique principale de abstract est que vous pouvez avoir une résolution commune, fournir des données personnalisées héritées via des données à utiliser par des états enfants ou un écouteur d'événements. De plus, vous pouvez avoir OnEnter & OnExit afin de vous assurer que tout est en ordre avant de charger state & en quittant state

21
Pankaj Parkar

Si vous ne voulez pas d'un état qui puisse être touché, vous pouvez en faire un état abstrait. Exemple

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

Si vous ne voulez pas que l'utilisateur aille simplement à \A, vous devriez le rendre abstract. 

5
AD.Net

Fondamentalement, les états abstraits vous aident à déplacer des fonctionnalités communes d'états différents dans un état abstrait parent.

Un exemple typique est un état qui gère le chargement du nom d'utilisateur, des paramètres de localisation et des métadonnées. Vous ne voulez pas que l'utilisateur redirige vers un état qui chargera juste cela. Vous voulez que cela soit chargé toujours, lorsque redirigé vers tous les états

/session serait abstrait mais /session/main, /session/detail ne le serait pas. À travers les dépendances, les données de session sont chargées lorsque vous passez aux états main et detail, mais vous ne voulez pas que l'utilisateur passe à l'état session.

3
Sulthan

États abstraits

Il existe des situations où nous avons besoin d'informations communes dans plusieurs États. À cette fin, UI-Router offre la possibilité de spécifier des états abstraits . Les états abstraits peuvent avoir des états enfants, mais ils ne peuvent pas être activés ni transformés. Un état abstrait est implicitement activé lorsque l'un de ses états enfants est activé . Ceci est utile lorsque: Nous devons ajouter une URL à toutes les urls de l'état des enfants Nous devons insérer un modèle avec ses propres ui-view que les états enfants vont remplir nous devons fournir des dépendances résolues (via resol) afin d’être utilisées par les états enfants nous devons fournir des données d’état personnalisées héritées afin d’être utilisées par des états enfants ou Les événements Les états abstraits sont définis en spécifiant la clé abstraite dans l'objet de configuration d'état défini sur true.

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})
0
Abdulqadir_WDDN