Angular JS 使用技巧

2021-07-24 19:36:39 字數 1550 閱讀 7768

最近用angular js做為前端框架,本文記錄一些使用過程中的技巧,只做用法的描述,不做過多原理上的討論。

angular.element(document).ready(

function

() );

假設這樣一種情況。你在接收乙個專案的時候,看到別人已經寫了下面的**(後面的**省略):ul.

..

現在你需要在頁面中嵌入廣告,顯然把廣告相關的controller和service寫到article.js中是很不恰當的。此時你會發現,加入advertise.js之後,原有的article.js裡面的controller無法正常工作了。ul.

..

var advertise = angular.module('advertise', ['ngdialog', 'article', 'user']);
ng-repeat相當好用,但是侷限性也很強。我從資料庫中取一系列資料的時候,想要剔除第乙個,只拿後面的。這個功能在後台實現起來有點殺雞焉用牛刀的感覺,其實ng-repeat是有這個功能的。

div.item(ng-repeat="x in photos.slice(1)")
這樣你取出的x就直接是從第二個迴圈到最後乙個。

除此之外,ng-repeat也可以用來實現類似於

for(i=0;i

i++)

的功能,只需要活用}即可。這裡有一點要格外注意:

"}",得到"1","2","3"等等

"}+1",得到"0+1","1+1","2+1"等等

這個是$scope經常用到的,用於各個scope之間的訊息傳遞。一旦發生了某個時間,就通過$emit或者$broadcast來發出訊息,再通過$on進行響應。

區別在於,$emit是向上級$scope傳送訊息,而$broadcast是向下級$scope傳送訊息。

舉個栗子,像本文中第二部分,宣告了下面的**之後,advertise.js中的$scope就相當於是article.js中的$scope的下級。

var advertise = angular.module('advertise', ['ngdialog', 'article', 'user']);
這樣在article.js的某個controller中$broadcast出的訊息就可以在advertise.js中的controller通過$on觸發某個事件。還是來個栗子

});說明:

JSDuck 與 AngularJS 融合技巧

字數 1568 前面,我們以乙個實戰案例來詳細說明了如何在實際開發中使用jsduck工具。但是,並不是所有的時候,的封裝方式都受我們控制的。例如,如果我們使用了現在的幾個主流框架angularjs react或者vue的時候,的封裝方式就必須按照框架定義的方式來構建。當我們的 現了模組 控制器 服務...

JSDuck 與 AngularJS 融合技巧

前言 前面,我們以乙個實戰案例來詳細說明了如何在實際開發中使用jsduck工具。但是,並不是所有的時候,的封裝方式都受我們控制的。例如,如果我們使用了現在的幾個主流框架angularjs react或者vue的時候,的封裝方式就必須按照框架定義的方式來構建。當我們的 現了模組 控制器 服務 指令等j...

angularjs個人使用總結

1.資料自動重新整理問題 1 ng model是雙向資料繫結 scope view層,在js中如果資料更新,頁面的值也會自動更新,但ng model只能在有限的表單幾個元素中使用,例如,2 ng bind單向資料繫結 scope view層,在js中如果資料更新,頁面的值也會自動更新,但ng bin...