AngularJS Breadcrumb With Route

同步發布於 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

第一次寫AngularJS文章就挑戰Breadcrumb，寫得非常簡單陽春，
在寫這篇找資料時，意外找到一個更好的做法，提供參考
Auto-breadcrumbs with angular-ui-router

不過我的作法是手動breadcrumbs 冏rz...

那就來獻醜了...

首先呢~當然是看index.html
引入所需要的JS，body就只放breadcrumb directive以及view。

 data-ng-app="bcapp">

 charset="utf-8">

-directive></breadcrumb-directive>

data-ng-view>

接著看看app.js、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

(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拿到第一筆資料

(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

 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

 href="#hello" ng-click="">Hello ||  href="#world">World