search

Home >Web Front-end >JS Tutorial >Detailed examples based on angular-utils-ui-breadcrumbs usage experience

Detailed examples based on angular-utils-ui-breadcrumbs usage experience

小云云
小云云Original
2017-12-28 11:24:151532browse

angular-utils-ui-breadcrumbs is a plug-in for automatically generating breadcrumbs navigation bar, which requires angular, UIRouter and bootstrap3.css. The screenshot of the generated interface is as follows. Clicking on the corresponding breadcrumbs will jump to the corresponding route. Clicking on the corresponding route will also automatically generate the corresponding breadcrumbs: This article mainly brings you an article based on the use experience of angular-utils-ui-breadcrumbs. (share). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Installation: npm install angular-utils-ui-breadcrumbs

Module dependencies: 

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

ui.router.state is used here .events module, because the uiBreadcrumbs depends on the $stateChangeSuccess event, and uiRouter recommends using the Transition hook after version 1.x. In order to be compatible with the original version, the deprecated state events are encapsulated into the stateEvent.js file. This file In the UIRouter package, so we need to introduce this file. The angularUtils.directives.uiBreadcrumbs module already depends on the ui.router module, and we do not need to introduce it again here.

The file directory structure is as follows: 

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

The following is a detailed description of how to use the plug-in: 

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

dispalyname-property: (required ), this attribute points to a certain attribute of the state configuration object when you declare the route. The value of this attribute is the value that the breadcrumbs will display under the route. If not specified, the name attribute of the state will be displayed.

template-url: (Optional) Specify the path of uiBreadcrumbs.tpl.html. This file is the template of the ui-breadcrumbs directive. If not specified, the following directory will be used by default. The following is the content of the source code: 

　 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), when using abstract state, we cannot transition to this state. Therefore we cannot display the breadcrumbs of this state, because clicking on an abstract state will cause an exception, so to solve this situation, we can let abstract-proxy-property point to a state config property, the value of which is When a certain state.name, that is, a certain route, needs to display the breadcrumbs of the abstract state, it will look for the state.name to replace the abstract state. As in the above example, we specified the state of home.info.

Related recommendations:

Tutorial on the method of controller inheritance in AngularJS

Example sharing of some ui calendar in angular Usage experience

How to solve the warning when binding html content in Angular4

The above is the detailed content of Detailed examples based on angular-utils-ui-breadcrumbs usage experience. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：ztree implements dynamic spanning tree on the left and content details function example sharing on the rightNext article：ztree implements dynamic spanning tree on the left and content details function example sharing on the right

Related articles

See more