使用angular中的service和filter編寫組件樹

學(xué)習(xí)《AngularJS深度剖析與實(shí)踐》總結(jié)

  • 在我們平時(shí)的開發(fā)中错忱,需要對(duì)某些數(shù)據(jù)進(jìn)行以樹的形式進(jìn)行展現(xiàn)倘待,比如:權(quán)限角色、菜單膝昆、嵌套評(píng)論等丸边。這個(gè)時(shí)候我們需要使用angular進(jìn)行對(duì)數(shù)據(jù)抽象,構(gòu)造我們自己的組件樹:
  • 例子:我們就拿主題樹作為一個(gè)例子荚孵,然后一步一步去優(yōu)雅的實(shí)現(xiàn)它:
  1. 首先我們準(zhǔn)備好angular的庫文件妹窖,建立好相應(yīng)的目錄及文件,按照angular遵循的風(fēng)格:約定優(yōu)于配置收叶。首先我們創(chuàng)建一個(gè)用于展示的目錄骄呼,theme-tree
mkdir theme-tree && cd $_

2.創(chuàng)建需要展示的html頁面文件:

touch index.html

3.創(chuàng)建存放項(xiàng)目js文件的目錄:

mkdir js

4.創(chuàng)建存放angular項(xiàng)目的controller目錄、service目錄和filter目錄:

mkdir controller && mkdir service && mkdir filter

5.創(chuàng)建angular項(xiàng)目的入口文件滔驾,app.js

cd js && touch app.js

6.目前先不考慮UI效果部分谒麦,主要以實(shí)現(xiàn)功能為主,我們使用bower來安裝和管理相應(yīng)的js第三方庫文件哆致,如果沒有安裝bower工具绕德,可以借助npm進(jìn)行安裝-npm install -g bower ,在我們創(chuàng)建的theme-tree目錄下,鍵入如下命令安裝angular庫的依賴:

bower install angular --save

以上命令實(shí)行完畢后我們的目錄結(jié)構(gòu)如下:


目錄文件顯示

7.接下來我們開始編輯js/app.js入口文件:

angular.module('myApp', []);

8.接下來我們開始編寫控制器文件js/controller/index.client.controller.js:

angular.module('myApp').controller("ThreedTreeCtrl",function ThreedTreeCtrl(tree) {
        var vm = this;
        vm.items = [{
                id: 1,
                title: "Java",
                poster: "Messi",
                dateCreated: "2012-02-19T00:00:00",
                items: [{
                        id: 11,
                        title: 'Spring',
                        poster: 'John',
                        dateCreated: "2012-02-19T00:00:00",
                        items: [
                                {
                                        id: 111,
                                        title: 'AOP',
                                        poster: 'Mike',
                                        dateCreated: "2016-02-19T00:00:00",
                                         items: [
                                {
                                        id: 1111,
                                        title: 'IOC',
                                        poster: 'Jack']
                                }
                        ]
                }, {

                                id: 2,
                                title: "SpringBoot",
                                poster: "Lucy",
                                dateCreated: "2011-02-19T00:00:00"
                        }
                ]
        }, {
                        id: 2,
                        title: "JavaScript",
                        poster: "Jack",
                        dateCreated: "2012-02-19T00:00:00",
                }
        ];
});

以上內(nèi)容很簡(jiǎn)單摊阀,構(gòu)建了一個(gè)ThreedTreeCtrl控制器耻蛇,里面嵌套了一些隨意的數(shù)據(jù)踪蹬,主要是為了模擬父子關(guān)系;

9.接下來我們編輯js/service/index.client.service.js文件臣咖,用于對(duì)數(shù)據(jù)進(jìn)行附加相應(yīng)的行為跃捣。思考一下,當(dāng)我們有了這樣一組數(shù)據(jù)后夺蛇,我們要為它添加什么方法和屬性疚漆,首先應(yīng)該添加父節(jié)點(diǎn)是否折疊,此屬性主要是為了在界面顯示的時(shí)候展開或折疊子節(jié)點(diǎn)數(shù)據(jù)刁赦。當(dāng)展開的時(shí)候我們使用“-”表示娶聘,折疊的時(shí)候我們使用"+"表示,當(dāng)折疊時(shí)單擊節(jié)點(diǎn)應(yīng)該展開子節(jié)點(diǎn)甚脉,當(dāng)展開的時(shí)候丸升,單擊子節(jié)點(diǎn)應(yīng)該折疊父節(jié)點(diǎn);將新增的屬性和方法為了減小和原始數(shù)據(jù)沖突牺氨,并且這些數(shù)據(jù)通過$http或者$resource提交給服務(wù)器狡耻,它們所調(diào)用的angular.toJso()函數(shù)會(huì)忽略所有以$開頭的屬性,這樣我們擴(kuò)展的屬性就不會(huì)被提交到服務(wù)端了猴凹。還有一個(gè)方便的是夷狰,當(dāng)我們看到數(shù)據(jù)上有"$"開頭的屬性就是擴(kuò)展的屬性。接下來我們實(shí)現(xiàn)它:

angular.module('myApp').service('tree',function Tree(){
    var self = this;
    //為每一項(xiàng)節(jié)點(diǎn)添加屬性和方法
    var enhanceItem = function(item,childrenName){
        item.$hasChildren = function(){
            var subItems = this[childrenName];
            return angular.isArray(subItems) && subItems.length;
        };
        item.$foldToggle = function(){
            this.$folded = !this.$folded;
        };
        item.$isFolded = function(){
            return this.$folded;
        };
    };

    //對(duì)傳進(jìn)來的數(shù)據(jù)進(jìn)行強(qiáng)化
    this.enhance = function(items,childrenName){
        if(angular.isUndefined(childrenName)){
            childrenName = "items";
        }
        angular.forEach(items,function(item){
            enhanceItem(item,childrenName);
            //如果有子節(jié)點(diǎn)則遞歸處理
            self.enhance(item[childrenName],childrenName);
        });
        console.log(items);
        return items;
    };
});

10.這樣我們完成了對(duì)數(shù)據(jù)進(jìn)行強(qiáng)化精堕,此時(shí)我們?nèi)绻苯釉赾ontroller調(diào)用service的enhance 方法孵淘,將服務(wù)端返回的json數(shù)據(jù)進(jìn)行加強(qiáng),為他們添加的相應(yīng)的屬性和方法歹篓,然后在頁面進(jìn)行展示調(diào)用就可以了瘫证,但是這樣感覺比較臟,不干凈庄撮,我們不在contrller直接調(diào)用service里面的enhance 方法背捌,我們可以創(chuàng)建一個(gè)過濾器來對(duì)數(shù)據(jù)進(jìn)行添加過濾的功能,接下來我們開始編輯filter/index.client.filter.js:

angular.module('myApp').filter('tree',function(tree){
    return function(items,childrenName){
        tree.enhance(items,childrenName);
        return items;
    };
});

11.接下來編寫html文件洞斯,開始對(duì)主題樹進(jìn)行展現(xiàn)并且引入相關(guān)文件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>

    <div ng-app="myApp" ng-controller="ThreedTreeCtrl as vm">
        <ul ng-if="vm.items">
            <li ng-repeat="item1 in vm.items | tree">
                <div ng-click="item1.$foldToggle()">
                    <span ng-if="item1.$hasChildren()">
                    <span ng-if="!item1.$isFolded()">-</span>
                    <span ng-if="item1.$isFolded()">+</span>
                    </span>
                    {{ item1.title }}
                </div>

                <ul ng-if="item1.$hasChildren() && !item1.$isFolded()">
                    <li ng-repeat="item2 in item1.items">
                        <div ng-click="item2.$foldToggle()">
                            <span ng-if="item2.$hasChildren()">
                    <span ng-if="!item2.$isFolded()">-</span>
                            <span ng-if="item2.$isFolded()">+</span>
                            </span>
                            {{ item2.title }}
                        </div>

                        <ul ng-if="item2.$hasChildren() && !item2.$isFolded()">
                            <li ng-repeat="item3 in item2.items">
                                {{ item3.title }}
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="js/app.js"></script>
     <script src="js/controller/index.client.controller.js"></script>
    <script src="js/service/index.client.service.js"></script>
    <script src="js/filters/index.client.filter.js"></script>
    
     
</body>

</html>

此時(shí)我們便完成了對(duì)主題樹功能的實(shí)現(xiàn)毡庆,在index.html文件中,我們只展示了兩層嵌套關(guān)系以作為示例烙如,根據(jù)自己的業(yè)務(wù)場(chǎng)景進(jìn)行擴(kuò)展么抗。
以上實(shí)現(xiàn)還不夠優(yōu)雅,等待以后需要將主題遞歸樹封裝為指令亚铁,最后附上github地址:
https://github.com/strongant/angularjs
源碼位于此倉庫下的angular-tree目錄蝇刀,歡迎提出issue。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末徘溢,一起剝皮案震驚了整個(gè)濱河市吞琐,隨后出現(xiàn)的幾起案子捆探,更是在濱河造成了極大的恐慌,老刑警劉巖站粟,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黍图,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奴烙,警方通過查閱死者的電腦和手機(jī)助被,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來切诀,“玉大人恰起,你說我怎么就攤上這事≈耗粒” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵肯污,是天一觀的道長翘单。 經(jīng)常有香客問我,道長蹦渣,這世上最難降的妖魔是什么哄芜? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮柬唯,結(jié)果婚禮上认臊,老公的妹妹穿的比我還像新娘。我一直安慰自己锄奢,他們只是感情好失晴,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拘央,像睡著了一般涂屁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灰伟,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天拆又,我揣著相機(jī)與錄音,去河邊找鬼栏账。 笑死帖族,一個(gè)胖子當(dāng)著我的面吹牛挡爵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播了讨,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼制轰,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了垃杖?” 一聲冷哼從身側(cè)響起丈屹,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤调俘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后彩库,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體先蒋,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡眯搭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年业岁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了笔时。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡借笙,死狀恐怖提澎,靈堂內(nèi)的尸體忽然破棺而出念链,到底是詐尸還是另有隱情,我是刑警寧澤谦纱,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站君编,受9級(jí)特大地震影響跨嘉,放射性物質(zhì)發(fā)生泄漏祠乃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一琴拧、第九天 我趴在偏房一處隱蔽的房頂上張望蚓胸。 院中可真熱鬧除师,春花似錦汛聚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芯侥。三九已至乳讥,卻和暖如春云石,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淋硝。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國打工谣膳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铅乡,地道東北人阵幸。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓芽世,卻偏偏與公主長得像济瓢,于是被迫代替她去往敵國和親欢峰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)扒吁,斷路器室囊,智...
    卡卡羅2017閱讀 134,715評(píng)論 18 139
  • 1融撞、angularjs的幾大特性是什么尝偎? 雙向數(shù)據(jù)綁定、依賴注入肤寝、模板抖僵、指令耍群、MVC/MVVM 2、列舉幾種常見的...
    2e9a10d418ab閱讀 1,276評(píng)論 0 10
  • 本文從 這里 翻譯過來的。 2048這個(gè)游戲有一段時(shí)間特別火耘婚,Github上有其原始版本,游戲看起來很簡(jiǎn)單嚷闭,但是...
    江楓閱讀 1,477評(píng)論 2 7
  • Angular面試題 一胞锰、ng-show/ng-hide與ng-if的區(qū)別嗅榕? 第一點(diǎn)區(qū)別是,ng-if在后面表達(dá)式...
    w_zhuan閱讀 5,538評(píng)論 0 26
  • 3月11日兼雄,檢車回來赦肋,櫻花已經(jīng)全部怒放励稳,將樹枝沉甸甸地往下綴著。蜜蜂忙碌著趣避,在花間穿來插去新翎,似乎想要急著把花蜜都吸...
    貓薄荷閱讀 243評(píng)論 0 0