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']);Nach dem Login kopieren
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>
Nach dem Login kopieren
//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: 'apple'})">apple</a></li>
<li><a ui-sref=".detail({type: 'banane'})">banane</a></li>
<li><a ui-sref=".detail({type: 'pear'})">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
}]
}
})
}]);Nach dem Login kopieren
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>Nach dem Login kopieren
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']);
}Nach dem Login kopieren
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!
