recherche

Maison >interface Web >js tutoriel >Exemples détaillés basés sur l'expérience d'utilisation d'angular-utils-ui-breadcrumbs

Exemples détaillés basés sur l'expérience d'utilisation d'angular-utils-ui-breadcrumbs

小云云
小云云original
2017-12-28 11:24:151535parcourir

angular-utils-ui-breadcrumbs est un plug-in permettant de générer automatiquement une barre de navigation de fil d'Ariane. Il dépend d'angular, d'UIRouter et de bootstrap3.css. La capture d'écran de l'interface générée est la suivante. Cliquer sur le fil d'Ariane correspondant passera à l'itinéraire correspondant. Cliquer sur l'itinéraire correspondant générera automatiquement le fil d'Ariane correspondant : Cet article vous propose principalement un article basé sur l'expérience d'utilisation d'angular-utils. -ui-fil d'Ariane (partager). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Installation : npm install angulaire-utils-ui-breadcrumbs

Dépendances du module : 

var app = angular.module('myapp', ['ui.router.state.events','angularUtils.directives.uiBreadcrumbs']);

ui.router est utilisé ici .state.events, car uiBreadcrumbs dépend de l'événement $stateChangeSuccess et uiRouter recommande d'utiliser le hook Transition après la version 1.x. Afin d'être compatible avec la version originale, les événements d'état obsolètes sont encapsulés dans stateEvent.js. Ce fichier est dans le package UIRouter, nous devons donc l'introduire. Le module angulaireUtils.directives.uiBreadcrumbs dépend déjà du module ui.router, et nous n'avons pas besoin de le présenter à nouveau ici.

La structure des répertoires de fichiers est la suivante : 

<!--index.html-->
<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-strict-di>
<head>
 <meta charset="UTF-8">
 <title>angular-utils-ui-breadcrumbs</title>
 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<ui-breadcrumbs displayname-property="data.displayName" abstract-proxy-property="data.proxy" template-url="./uiBreadcrumbs.tpl.html"></ui-breadcrumbs>
<ui-view name="home"></ui-view>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="stateEvents.js"></script>
<script src="uiBreadcrumbs.js"></script>
<script src="index.js"></script>
</html>
//index.js
var app = angular.module('myapp', ['ui.router.state.events','angularUtils.directives.uiBreadcrumbs']);

app.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) =>{
 $urlRouterProvider.otherwise('/home/production');
 $stateProvider
  .state('home', {
   abstract: true,
   url: '/home',
   data: {
    proxy: 'home.info'
   },
   views: {
    'home@': {
     template: '<p ui-view="content"></p>'
    }
   }
  })
  .state('home.info', {
   url: '/info',
   data: {
    displayName: 'home'
   },
   views: {
    'content@home': {
     template: '<a ui-sref="^.production">production</a>'
    }
   }
  })
  .state('home.production', {
   url: '/production',
   data: {
    displayName: 'production'
   },
   views: {
    'content@home': {
     template: '<a ui-sref=".fruits">fruits</a>'
    }
   }
  })
  .state('home.production.fruits', {
   url: '/fruits',
   data: {
    displayName: 'fruits'
   },
   views: {
    'content@home': {
     template: `<ul>
      <li><a ui-sref=".detail({type: &#39;apple&#39;})">apple</a></li>
      <li><a ui-sref=".detail({type: &#39;banane&#39;})">banane</a></li>
      <li><a ui-sref=".detail({type: &#39;pear&#39;})">pear</a></li>
     </ul>`
    }
   }
  })
  .state('home.production.fruits.detail', {
   url: '/:type',
   data: {
    displayName: 'detail'
   },
   views: {
    'content@home': {
     template: '<p>{{$resolve.fruit}}</p>'
    }
   },
   resolve: {
    fruit: ['$stateParams', $stateParams =>{
     return $stateParams.type
    }]
   }
  })
}]);

Ce qui suit est une description détaillée de la façon d'utiliser le plug-in : 

<ui-breadcrumbs displayname-property="data.displayName"
    [template-url=""]
    [abstract-proxy-property=""]>
</ui-breadcrumbs>

dispalyname-property : (obligatoire), cette propriété pointe vers une certaine propriété de l'objet de configuration d'état lorsque vous déclarez la route. La valeur de cette propriété est la valeur que le fil d'Ariane affichera sous le. route S'il n'est pas spécifié, il sera affiché. L'attribut name de l'état.

template-url : (Facultatif) Spécifiez le chemin de uiBreadcrumbs.tpl.html Ce fichier est le modèle de la directive ui-breadcrumbs S'il n'est pas spécifié, le répertoire suivant sera utilisé par défaut. est le contenu du code source : 

　 var moduleName = 'angularUtils.directives.uiBreadcrumbs';
 var templateUrl = 'directives/uiBreadcrumbs/uiBreadcrumbs.tpl.html';

 /**
  * Module
  */
 var module;
 try {
  module = angular.module(moduleName);
 } catch(err) {
  // named module does not exist, so create one
  module = angular.module(moduleName, ['ui.router']);
 }

abstract-proxy-property : (facultatif), lors de l'utilisation de l'état abstrait, nous ne pouvons pas passer à cet état. Par conséquent, nous ne pouvons pas afficher le fil d'Ariane de cet état, car cliquer sur un état abstrait provoquera une exception, donc pour résoudre cette situation, nous pouvons laisser abstract-proxy-property pointer vers une propriété de configuration d'état, dont la valeur est When a certain state.name, c'est-à-dire un certain itinéraire, doit afficher le fil d'Ariane de l'état abstrait, il recherchera le state.name pour remplacer l'état abstrait. Comme dans l'exemple ci-dessus, nous avons spécifié l'état de home.info.

Recommandations associées :

Tutoriel sur la méthode d'héritage du contrôleur dans AngularJS

Exemples pour partager une partie du calendrier de l'interface utilisateur dans l'expérience d'utilisation angulaire

Comment résoudre l'avertissement lors de la liaison du contenu HTML dans Angular4

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：ztree implémente un arbre couvrant dynamique à gauche et un exemple de partage de fonction de détails de contenu à droiteArticle suivant：ztree implémente un arbre couvrant dynamique à gauche et un exemple de partage de fonction de détails de contenu à droite

Articles Liés

Voir plus