Breadcrumbs in Angular

Question

I want to use Angular breading options . I added this javascript file to my services folder.

I added a div to my header.html file to call 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> 

A div is created, and when I check it, I see how <!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->

But no crackers. Any ideas?

Answer 1

It is not enough to simply add HTML to the header template file. Make sure that you also do the following:

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

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

• Include services.breadcrumbs as a module dependency for the main application:

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

• Finally, make sure you actually breadcrumbs service into your controller, and then add it to the $ scope area:

   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 (see lines 6, 60 and 62).