Как применять Breadcrum с помощью AngularJS?

Question

Я хочу добавить хлеб в моем приложении, Как я могу достичь этой задачи, используя AngularJS. До сих пор я реализовал файл маршрутизатора и заголовка и не уверен после этого, как использовать сухари в AngularJS. До сих пор пытались ниже код ...

INDEX

<div class="container mainIndexContainer"> 
     <div id="wrap"> 
      <div ng-include src="'views/header.html'"></div> 
      <div class="container mainIndexContainer"> 
       <div ui-view=""></div> 
      </div> 
      <div ng-include src="'views/footer.html'"></div> 
     </div> 

HTML

<div class="row"> 
     <div class="container-fluid banner"> 
      <div class="red title pull-left">Risk Assessment Platform</div> 
      <div class="blue pull-right"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <nav ng-show="user.isAuthenticated" class="navbar navbar-default risknavheader" role="navigation"> 
      <ul kendo-menu 
       k-orientation="horizontal" k-rebind="'horizontal'"> 
       <li><a ui-sref="home" ng-click="showConfirmationOnChange('/')">Dashboard</a></li> 
       <li><a href="">Process Risk & Control 
         Inventory</a> 
        <ul class="submenu"> 
         <li ng-show="PROCESS_ADD"><a ui-sref="createProcess" ng-click="showConfirmationOnChange('/process/create')">Create 
           New Process</a></li> 
         <li ng-show="RISK_ADD"><a ui-sref="createRisk" ng-click="showConfirmationOnChange('/risk/create')">Create New Unaligned 
           Risk</a></li> 
         <li ng-show="CONTROL_ADD"><a ui-sref="createControl" ng-click="showConfirmationOnChange('/createNewControl/_new')">Create 
           New Unaligned Control</a></li> 
         <li ng-show="PROCESS_VIEW || RISK_VIEW || CONTROL_VIEW"><a ui-sref="search" ng-click="showConfirmationOnChange('/viewSearchInv')">View/ 
           Search Inventory</a></li> 
         <li disabled>View End-to-End</li> 
         <li disabled>Reports</li > 

        </ul></li> 
       <li><a class="no-style" href="#">Data Upload </a> 
        <ul class="submenu"> 
        <!-- This below link will be useful for future development --> 
        <!-- li <a href="#/uploadProcessInventory">Upload Inventory</a></li --> 
         <li disabled>Upload Inventory</li> 
        </ul></li> 
       <li><a ui-sref="home">Risk Assessment</a> 
        <ul class="submenu"> 
         <li disabled>RCSA</li> 
         <li disabled>CRA</li> 
         <li disabled>Reports</li> 
        </ul></li> 
       <li><a ui-sref="home">Administration </a> 
       </li> 
       <li style="margin-right: 0px;" class="nav navbar-nav navbar-right" ng-show="user.isAuthenticated"><a>{{user.customUserDetails.workFullName}}</a> 
         <ul class="submenu"> 
          <li><a ui-sref="logout">Logout</a></li> 
         </ul> 
       </li> 

      </ul> 
      </nav> 
    </div> 
</div> 

ROUTER.JS

angular.module('riskAssessmentApp') 
     .config(function($stateProvider, $httpProvider, $urlRouterProvider) { 

     /* 
     * This has to be here because the browsers will not catch the home 
     * state without it 
     */ 
     $urlRouterProvider.otherwise(function($injector, $location) { 
      var $state = $injector.get("$state"); 
      $state.go("home"); 
     }); 

     $httpProvider.defaults.withCredentials = true; 
     $httpProvider.defaults.headers.post = {'Content-Type': 'application/json'}; 
     $httpProvider.interceptors.push('HttpResponseInterceptor'); 

     $stateProvider 
     .state('home', { 
       url : '/', 
       templateUrl: 'views/riskAssesmentHomePage.html', 
       controller: 'riskHomePageController', 
       data: { 
        authenticate: true 
       } 
      }).state('smlogin', { 
       url: '/smlogin', 
       controller: 'SMLoginController' 
      }) 
      .state('login', { 
       url : '/login', 
       templateUrl : 'views/login.html', 
       controller : 'LoginController' 
      }) 
      .state('error', { 
       url:'/error', 
       templateUrl: 'views/error.html' 
      }) 
      .state('settings', { 
       url:'/settings', 
       templateUrl: 'views/settings.html', 
       controller: 'SettingsController' 
      }) 
      .state('sessions', { 
       url:'/sessions', 
       templateUrl: 'views/sessions.html', 
       controller: 'SessionsController', 
       resolve:{ 
        resolvedSessions:['Sessions', function (Sessions) { 
         return Sessions.get(); 
        }] 
       } 
      }) 
      .state('metrics', { 
       url:'/metrics', 
       templateUrl: 'views/metrics.html', 
       controller: 'MetricsController' 
      }) 
      .state('logs', { 
       url:'/logs', 
       templateUrl: 'views/logs.html', 
       controller: 'LogsController', 
       resolve:{ 
        resolvedLogs:['LogsService', function (LogsService) { 
         return LogsService.findAll(); 
        }] 
       } 
      }) 
      .state('createProcess', { 
       url:'/process/create', 
       templateUrl : 'views/createEditProcessContent.html', 
       controller : 'ProcessController', 
       data: { 
        authenticate: true 
       } 
      }) 
      .state('editProcess', { 
       url:'/process/:process_Id/:refresh', 
       templateUrl : 'views/createEditProcessContent.html', 
       controller : 'ProcessController', 
       data: { 
        authenticate: true 
       } 
      }) 
      .state('createRisk', { 
       url:'/risk/create', 
       templateUrl: 'views/createNewRisk.html',   
       controller: 'RiskController', 
       data: { 
        authenticate: true 
       }   
      }) 

Answer 1

Вы можете использовать https://github.com/ncuillery/angular-breadcrumb

Определить свойство ncyBreadcrumb.label для каждого состояний

И затем использовать директиву

<div ncy-breadcrumb></div>