Heim > Artikel > Web-Frontend > Detaillierte Beispiele basierend auf der Nutzungserfahrung von Angular-Utils-UI-Breadcrumbs

Detaillierte Beispiele basierend auf der Nutzungserfahrung von Angular-Utils-UI-Breadcrumbs

小云云Original: 2017-12-28 11:24:151483Durchsuche

angular-utils-ui-breadcrumbs ist ein Plug-in zum automatischen Generieren der Breadcrumbs-Navigationsleiste. Es hängt von Angular, UIRouter und bootstrap3.css ab. Der Screenshot der generierten Schnittstelle sieht wie folgt aus: Durch Klicken auf die entsprechende Route werden automatisch die entsprechenden Breadcrumbs generiert: Dieser Artikel basiert hauptsächlich auf der Nutzungserfahrung von Angular-Utils -ui-breadcrumbs (teilen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Installation: npm install angle-utils-ui-breadcrumbs

Modulabhängigkeiten:

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

ui.router wird hier verwendet .state.events-Modul, da uiBreadcrumbs vom $stateChangeSuccess-Ereignis abhängt und uiRouter die Verwendung des Transition-Hooks nach Version 1.x empfiehlt. Um mit der Originalversion kompatibel zu sein, sind die veralteten Statusereignisse in stateEvent.js gekapselt Diese Datei befindet sich im UIRouter-Paket, daher müssen wir sie einführen. Das Modul „angularUtils.directives.uiBreadcrumbs“ hängt bereits vom Modul „ui.router“ ab und muss hier nicht noch einmal eingeführt werden.

Die Dateiverzeichnisstruktur ist wie folgt:

<!--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
    }]
   }
  })
}]);

Im Folgenden finden Sie eine detaillierte Beschreibung zur Verwendung des Plug-Ins:

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

dispalyname-property: (erforderlich), diese Eigenschaft verweist auf eine bestimmte Eigenschaft des Statuskonfigurationsobjekts, wenn Sie die Route deklarieren. Der Wert dieser Eigenschaft ist der Wert, der in den Breadcrumbs angezeigt wird Route. Wenn nicht angegeben, wird das Namensattribut des Staates angezeigt.

template-url: (Optional) Geben Sie den Pfad von uiBreadcrumbs.tpl.html an. Wenn nicht angegeben, wird das folgende Verzeichnis verwendet ist der Inhalt des Quellcodes:

　 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: (optional), wenn wir den abstrakten Zustand verwenden, können wir nicht in diesen Zustand übergehen. Daher können wir die Breadcrumbs dieses Status nicht anzeigen, da das Klicken auf einen abstrakten Status eine Ausnahme auslöst. Um diese Situation zu lösen, können wir „abstract-proxy-property“ auf eine Statuskonfigurationseigenschaft verweisen lassen, deren Wert „Wenn ein bestimmter“ ist state.name, also eine bestimmte Route, muss die Breadcrumbs des abstrakten Status anzeigen und nach state.name suchen, um den abstrakten Status zu ersetzen. Wie im obigen Beispiel haben wir den Status von home.info angegeben.

Verwandte Empfehlungen:

Tutorial zur Methode der Controller-Vererbung in AngularJS

Beispiele zum Teilen einiger UI-Kalender im Angular-Nutzungserlebnis

So lösen Sie die Warnung beim Binden von HTML-Inhalten in Angular4

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele basierend auf der Nutzungserfahrung von Angular-Utils-UI-Breadcrumbs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：ztree implementiert auf der linken Seite einen dynamischen Spanning Tree und auf der rechten Seite die Funktion zum Teilen von InhaltsdetailsNächster Artikel：ztree implementiert auf der linken Seite einen dynamischen Spanning Tree und auf der rechten Seite die Funktion zum Teilen von Inhaltsdetails

In Verbindung stehende Artikel

Mehr sehen