ホームページ > 記事 > ウェブフロントエンド > angular-utils-ui-breadcrumbs の使用経験に基づいた詳細な例

angular-utils-ui-breadcrumbs の使用経験に基づいた詳細な例

小云云オリジナル: 2017-12-28 11:24:151488ブラウズ

angular-utils-ui-breadcrumbs は、ブレッドクラムナビゲーションバーを自動的に生成するために使用されるプラグインであり、angular、UIRouter、bootstrap3.css に依存します。生成されたインターフェイスのスクリーンショットは次のとおりです。対応するブレッドクラムをクリックすると、対応するルートにジャンプします。この記事では、主に angular-utils の使用経験に基づいた記事をお届けします。 -ui-ブレッドクラム (共有)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

インストール: npm install angular-utils-ui-breadcrumbs

モジュールの依存関係:

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

ここでは ui.router.state.events モジュールが使用されます。これは、uiBreadcrumbs が $stateChangeSuccess イベントに依存しており、uiRouter が1. バージョン後に Transition フックを使用することをお勧めします。すでに 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: (必須)、このプロパティは特定の状態設定を指します。ルーティング属性を宣言する場合、この属性の値はルートの下にブレッドクラムが表示される値になります。指定しない場合は、状態の name 属性が表示されます。

template-url: (オプション) uiBreadcrumbs.tpl.html へのパスを指定します。指定しない場合、次のディレクトリがデフォルトで使用されます。ソースコード:

　 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 に状態設定プロパティをポイントさせます。その値は When a specific state.name、つまり特定のルートは、抽象状態のパンくずリストを表示する必要があります。上記の例のように、home.info の状態を指定しました。

angular-utils-ui-breadcrumbs の使用経験に基づいた詳細な例

関連記事