CODEWITHSUNDEEP
angularjsangularjs-directivebreadcrumbs
Edison
Edison

Reputation: 91

Breadcrumbs in Angular

I want to use Angular's breadcrumb capability. I added this javascript file to my services folder.

I added a div to my header.html file to call the javascript. According to Angular, the div should look like this:

<div>
  <ul class="breadcrumb">
    <li ng-repeat="breadcrumb in breadcrumbs.getAll()">
      <span class="divider">/</span>
      <ng-switch on="$last">
        <span ng-switch-when="true">{{breadcrumb.name}}</span>
        <span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span>
       </ng-switch>
    </li>
   </ul>
</div>

The div is being created, and when I inspect it I see
<!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->

But no breadcrumbs. Any ideas?

Upvotes: 8

Views: 24959

Answers (1)

sergiopantoja
sergiopantoja

Reputation: 475

It's not enough to just add the HTML to your header template file. Make sure you've also completed the following:

  1. Include breadcrumbs.js in your main HTML template (usually index.html):

    <script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script>

  2. Include services.breadcrumbs as a module dependency for your main app:

    angular.module('myMainApp', ['services.breadcrumbs']);

  3. Finally, make sure you actually inject the breadcrumbs service into your controller, and then attach it to $scope:

    angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) {
    $scope.breadcrumbs = breadcrumbs;

    // ... other controller logic ...
});

You can see the implementation of Steps 2 and 3 in the angular-app project in the app.js file (refer to lines 6, 60, and 62).

Upvotes: 17

Related Questions