집 >웹 프론트엔드 >JS 튜토리얼 >angle-utils-ui-breadcrumbs 사용 경험을 바탕으로 한 자세한 예

angle-utils-ui-breadcrumbs 사용 경험을 바탕으로 한 자세한 예

小云云원래의: 2017-12-28 11:24:151659검색

angular-utils-ui-breadcrumbs는 탐색경로 탐색 표시줄을 자동으로 생성하는 데 사용되는 플러그인입니다. 이는 Angle, UIRouter 및 bootstrap3.css에 따라 다릅니다. 생성된 인터페이스의 스크린샷은 다음과 같습니다. 해당 탐색경로를 클릭하면 해당 경로로 이동합니다. 해당 경로를 클릭하면 해당 탐색경로가 자동으로 생성됩니다. 이 기사에서는 주로 Angle-utils 사용 경험을 바탕으로 한 기사를 제공합니다. -ui-breadcrumbs(공유). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

설치: npm install angle-utils-ui-breadcrumbs

모듈 종속성:

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

ui.router.state.events 모듈은 uiBreadcrumbs가 $stateChangeSuccess 이벤트에 의존하고 uiRouter가 1. 버전 이후에는 Transition Hook을 사용하는 것이 좋습니다. 이미 ui.router 모듈에 종속되어 있으므로 여기서는 다시 소개할 필요가 없습니다.

파일 디렉터리 구조는 다음과 같습니다.

<!--index.html-->
nbsp;html>


 <meta>
 <title>angular-utils-ui-breadcrumbs</title>
 <link>


<ui-breadcrumbs></ui-breadcrumbs>
<ui-view></ui-view>

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

//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></p>'
    }
   }
  })
  .state('home.info', {
   url: '/info',
   data: {
    displayName: 'home'
   },
   views: {
    'content@home': {
     template: '<a>production</a>'
    }
   }
  })
  .state('home.production', {
   url: '/production',
   data: {
    displayName: 'production'
   },
   views: {
    'content@home': {
     template: '<a>fruits</a>'
    }
   }
  })
  .state('home.production.fruits', {
   url: '/fruits',
   data: {
    displayName: 'fruits'
   },
   views: {
    'content@home': {
     template: `

apple
banane
pear

` } } }) .state('home.production.fruits.detail', { url: '/:type', data: { displayName: 'detail' }, views: { 'content@home': { template: '

' } }, resolve: { fruit: ['$stateParams', $stateParams =>{ return $stateParams.type }] } }) }]);

다음은 플러그인 사용 방법에 대한 자세한 설명입니다.

<ui-breadcrumbs>
</ui-breadcrumbs>

dispalyname-property: (필수), 이 속성은 특정 상태 구성을 가리킵니다. 라우팅 속성을 선언할 때 이 속성의 값은 탐색 경로 아래에 표시되는 값입니다. 지정하지 않으면 상태의 이름 속성이 표시됩니다.

template-url: (선택 사항) uiBreadcrumbs.tpl.html의 경로를 지정합니다. 이 파일은 ui-breadcrumbs 지시어의 템플릿입니다. 지정하지 않으면 다음 디렉터리가 기본적으로 사용됩니다. 소스 코드:

　 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: (선택 사항), 추상 상태를 사용하는 경우 이 상태로 전환할 수 없습니다. 따라서 추상 상태를 클릭하면 예외가 발생하기 때문에 이 상태의 이동 경로를 표시할 수 없습니다. 따라서 이 상황을 해결하려면 abstract-proxy-property가 상태 구성 속성을 가리키도록 할 수 있습니다. 그 값은 다음과 같습니다. state.name, 즉 특정 경로는 추상 상태의 탐색경로를 표시해야 하며, 위의 예에서와 같이 home.info의 상태를 지정하기 위해 state.name을 찾습니다.

angle-utils-ui-breadcrumbs 사용 경험을 바탕으로 한 자세한 예

관련 기사