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

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

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

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

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

<ui-breadcrumbs displayname-property="data.displayName"
    [template-url=""]
    [abstract-proxy-property=""]>
</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 사용 경험을 바탕으로 한 자세한 예

관련 기사