結構大約為:
– static/vendor/angular.js
– static/vendor/angular-breadcrumb/breadcrumb.js
– index.html
頁面的 HTML 大約是:
- <!DOCTYPE html>
- <html lang="en" ng-app="MyApp">
- <head>
- <meta charset="utf-8">
- <title>My Labs</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <link href="/static/vendor/bootstrap/css/bootstrap-responsive.min.css"rel="stylesheet">
- <script src="/static/vendor/jquery.js"></script>
- <script src="/static/vendor/angular.js"></script>
- <script src="/static/vendor/angular-breadcrumb/breadcrumb.js"></script>
- <script src="/static/js/application.js"></script>
- </head>
- <body ng-controller="MainController">
- <ul class="breadcrumb">
- <li ng-repeat="breadcrumb in breadcrumbs.getAll()">
- <ng-switch on="$last">
- <span ng-switch-when="true">{{ breadcrumb.name }}</span>
- <span ng-switch-default><a href="#{{ breadcrumb.path }}" class="hand">{{ breadcrumb.name }}</a></span>
- </ng-switch>
- <span class="divider">/</span>
- </li>
- <li class="pull-right"><div id="spinner"><i class="icon-spinner icon-spin icon-1x"></i></div></li>
- </ul>
- </body>
- </html>
而 application.js 大約是:
- var IndexController = function($scope, breadcrumbs) {
- breadcrumbs.set([{
- "name": "Home",
- "path": "/"
- }]);
- };
- IndexController.$inject = ['$scope', 'breadcrumbs'];
- angular.module('LabApp', ['breadcrumbs']).config(['$routeProvider',function($routeProvider) {
- $routeProvider.
- when('/', {
- templateUrl: 'views/index.html',
- controller: IndexController
- }).
- }).controller('MainController', ['$scope', 'breadcrumbs', function($scope,breadcrumbs) {
- $scope.breadcrumbs = breadcrumbs;
- });
最後的 angular-breadcrumb/breadcrumb.js 應該是這樣:
- angular.module('breadcrumbs', []);
- angular.module('breadcrumbs').factory('breadcrumbs', function() {
- var breadcrumbs = [];
- var breadcrumbsService = {};
- breadcrumbsService.set = function(urls) {
- breadcrumbs = urls;
- };
- breadcrumbsService.getAll = function() {
- return breadcrumbs;
- };
- breadcrumbsService.getFirst = function() {
- return breadcrumbs[0] || {};
- };
- return breadcrumbsService;
- });