結構大約為:
- static/vendor/angular.js
- static/vendor/angular-breadcrumb/breadcrumb.js
- index.html
頁面的 HTML 大約是:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!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"></span>
<span ng-switch-default><a href="#" class="hand"></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 大約是:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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 應該是這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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;
});
|
