同步發布於 http://villebez.logdown.com/posts/2015/07/20/angularjs-breadcrumb
AngularJS v1.4.4
Project結構：
-js/app.js
-js/route.js
-js/breadcrumb/directive.js
-js/breadcrumb/factory.js
-js/vendors/angular-route.min.js
-js/vendors/angular.min.js
-template/breadcrumb.html
-template/hello.html
-template/world.html
-template/index.html
-index.html
-js/app.js
-js/route.js
-js/breadcrumb/directive.js
-js/breadcrumb/factory.js
-js/vendors/angular-route.min.js
-js/vendors/angular.min.js
-template/breadcrumb.html
-template/hello.html
-template/world.html
-template/index.html
-index.html
第一次寫AngularJS文章就挑戰Breadcrumb，寫得非常簡單陽春，
在寫這篇找資料時，意外找到一個更好的做法，提供參考
Auto-breadcrumbs with angular-ui-router
在寫這篇找資料時，意外找到一個更好的做法，提供參考
Auto-breadcrumbs with angular-ui-router
不過我的作法是手動breadcrumbs 冏rz...
那就來獻醜了...
首先呢~當然是看index.html
引入所需要的JS，body就只放breadcrumb directive以及view。
引入所需要的JS，body就只放breadcrumb directive以及view。
data-ng-app="bcapp">
charset="utf-8">
</span>BreadCrumb Demo<span class="nt" style="margin: 0px; padding: 0px; color: rgb(38, 139, 210) !important; font-weight: bold !important;">
data-ng-view>
接著看看app.js、route.js
app 就只有迴圈設定$routeProvider，將route config抽出來至route.js
app 就只有迴圈設定$routeProvider，將route config抽出來至route.js
(function() {
'use strict';
angular.module('bcapp', [ 'ngRoute', 'components.breadcrumb' ]).config(configure);
configure.$inject = [ '$routeProvider' ];
function configure($routeProvider) {
// Url 設定
for ( var locationPath in appConfig.locationConfig) {
var urlPattern = locationPath;
var config = appConfig.locationConfig[locationPath];
$routeProvider.when(urlPattern, config);
}
}
})();
route config簡單的設定urlPattern、template與resolve對該頁設定breadcrumb
window.appConfig = window.appConfig || {};
window.appConfig.locationConfig = {
'/': {
templateUrl: '/template/index.html',
resolve : [["Breadcrumbs",function(Breadcrumbs){
Breadcrumbs.init();
}]]
},
'/hello': {
templateUrl: '/template/hello.html',
resolve : [["Breadcrumbs",function(Breadcrumbs){
Breadcrumbs.init();
Breadcrumbs.push({
"name": "Hello",
});
}]]
},
'/world': {
templateUrl: '/template/world.html',
resolve : [["Breadcrumbs",function(Breadcrumbs){
Breadcrumbs.init();
Breadcrumbs.push({
"name": "World",
});
}]]
}
};
再來看看breadcrumb directive.js, factory.js
directive很基本，指定restrict，載入templateUrl，注入Breadcrumbs factory並set scope.breadcrumbs讓html可以使用這個factory
directive很基本，指定restrict，載入templateUrl，注入Breadcrumbs factory並set scope.breadcrumbs讓html可以使用這個factory
(function(){
'use strict';
angular.module('components.breadcrumb',[]).directive('breadcrumbDirective', Directive);
Directive.$inject =
['Breadcrumbs'];
function Directive(Breadcrumbs) {
var directive = {
scope: {
},
restrict: 'E',
templateUrl : '/template/breadcrumb.html',
link : link
};
return directive;
function link(scope, elem, attrs, ctrl) {
scope.breadcrumbs = Breadcrumbs;
}
}
})();
factory提供了幾個function
init初始化
set傳入Array設定整個breadcrumb
push傳入一筆資料進入Array
getAll取得整個Array
getFirst拿到第一筆資料
init初始化
set傳入Array設定整個breadcrumb
push傳入一筆資料進入Array
getAll取得整個Array
getFirst拿到第一筆資料
(function(){
'use strict';
angular
.module('components.breadcrumb')
.factory('Breadcrumbs', factory);
factory.$inject = [];
function factory() {
var self = this;
self.breadcrumbs = [];
// Interface
self.init = init;
self.set = set;
self.push = push;
self.getAll = getAll;
self.getFirst = getFirst;
// Implement
function init(){
self.breadcrumbs =[{
"name": "首頁",
"path": "#/"
}];
}
function set (urls) {
self.breadcrumbs = urls;
}
function push (url){
self.breadcrumbs.push(url);
}
function getAll(){
return self.breadcrumbs;
}
function getFirst(){
return self.breadcrumbs[0] || {};
}
return self;
}
})();
最後就是四個template，其實沒什麼東西，只是為了呈現不同頁面與文字
-template/breadcrumb.html
-template/breadcrumb.html
class="breadCrumb">
ng-repeat="breadcrumb in breadcrumbs.getAll()" class="node">
-switch on="$last">
ng-switch-when="true">{{breadcrumb.name }}
ng-switch-default> href="{{ breadcrumb.path }}" class="hand">{{ breadcrumb.name }}
</ng-switch>
ng-if="!$last" class="divider">>
-template/hello.html
Hello
-template/world.html
world
-template/index.html
