AngularJS小結(jié)

最近湾揽、接到一個老項目需要維護開發(fā)新的功能瓤逼。用到的技術(shù)棧主要是AngularJS、對于近幾年一直用react库物、vue的前端來說還是有點不適應(yīng)呢霸旗,早些年當(dāng)vue和react還不溫不火的時候用過。一個多年不用的技術(shù)棧差不多都遺忘了差不多了戚揭,現(xiàn)在就項目中運用到的一些api進行一些小小的總結(jié)诱告;就當(dāng)是鞏固知識點了吧、有剛?cè)胄械耐瑢W(xué)可以參考民晒;AngularJS 可以和react精居、vue一樣構(gòu)建一個單一頁面SPA應(yīng)用程序锄禽。
1、AngularJS 表達式寫在雙大括號內(nèi):{{ expression }}箱蟆。

2沟绪、AngularJS 指令:如:ng-app?指令初始化一個 AngularJS 應(yīng)用程序刮便,ng-init?指令初始化應(yīng)用程序數(shù)據(jù)空猜,ng-model?指令把元素值(比如輸入域的值)綁定到應(yīng)用程序,ng-repeat?指令會重復(fù)一個 HTML 元素恨旱,你可以使用?.directive?函數(shù)來添加自定義的指令辈毯。

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

??? return {

??????? template : "<h1>自定義指令!</h1>"

??? };

});

</script>

3、AngularJS 控制器搜贤,ng-controller?指令定義了應(yīng)用程序控制器
<div?ng-app="myApp"?ng-controller="myCtrl">

名:?<input?type="text"?ng-model="firstName"><br>

姓:?<input?type="text"?ng-model="lastName"><br>

<br>

姓名:?{{firstName + " " + lastName}}

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

??? $scope.firstName = "John";

??? $scope.lastName = "Doe";

});

</script>
4谆沃、AngularJS 過濾器,可以使用一個管道字符(|)添加到表達式和指令中仪芒。

<div?ng-app="myApp"?ng-controller="personCtrl">

<p>姓名為?{{ lastName | uppercase }}</p>

</div>

5唁影、AngularJS 服務(wù),是一個函數(shù)或?qū)ο蟮嗝稍谀愕?AngularJS 應(yīng)用中使用据沈。

AngularJS 內(nèi)建了30 多個服務(wù)$location、$http饺蔑、$timeout锌介、$interval 服務(wù)等等、猾警、可以參考官網(wǎng)

6孔祸、AngularJS事件,ng-click?指令定義了 AngularJS 點擊事件

7发皿、AngularJS依賴注入崔慧,依賴注入(Dependency Injection,簡稱DI)是一種軟件設(shè)計模式穴墅,在這種模式下弊琴,一個或更多的依賴(或服務(wù))被注入(或者通過引用傳遞)到一個獨立的對象(或客戶端)中兢卵,然后成為了該客戶端狀態(tài)的一部分。該模式分離了客戶端依賴本身行為的創(chuàng)建,這使得程序設(shè)計變得松耦合观挎,并遵循了依賴反轉(zhuǎn)和單一職責(zé)原則。與服務(wù)定位器模式形成直接對比的是昂验,它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴缘滥。一句話 --- 沒事你不要來找我,有事我會去找你惩坑。

AngularJS 提供很好的依賴注入機制掉盅。以下5個核心組件用來作為依賴注入:value也拜、factory、service趾痘、provider慢哈、constant

8、AngularJS 路由

1永票、載入了實現(xiàn)路由的 js 文件:angular-route.js卵贱。

2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊侣集。angular.module('routingDemoApp',['ngRoute'])

3键俱、使用 ngView 指令<div ng-view></div>

4、配置 $routeProvider世分,AngularJS $routeProvider 用來定義路由規(guī)則编振。

module.config(['$routeProvider', function($routeProvider){ $routeProvider

? ? ? ? .when('/',{template:'這是首頁'})? ? ? ? .when('/computers',{template:'這是計算機頁面'})? ? ? ? .when('/goods',{template:'這是商品頁面'})? ? ? ? .otherwise({redirectTo:'/'});}]);

9、等等臭埋、踪央、、瓢阴、畅蹂、、還有很多知識點炫掐。用到了再總結(jié)魁莉、、募胃、旗唁、

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市痹束,隨后出現(xiàn)的幾起案子检疫,更是在濱河造成了極大的恐慌,老刑警劉巖祷嘶,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屎媳,死亡現(xiàn)場離奇詭異,居然都是意外死亡论巍,警方通過查閱死者的電腦和手機烛谊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嘉汰,“玉大人丹禀,你說我怎么就攤上這事。” “怎么了双泪?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵持搜,是天一觀的道長。 經(jīng)常有香客問我焙矛,道長葫盼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任村斟,我火速辦了婚禮贫导,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘邓梅。我一直安慰自己脱盲,他們只是感情好邑滨,可當(dāng)我...
    茶點故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布日缨。 她就那樣靜靜地躺著,像睡著了一般掖看。 火紅的嫁衣襯著肌膚如雪匣距。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天哎壳,我揣著相機與錄音毅待,去河邊找鬼。 笑死归榕,一個胖子當(dāng)著我的面吹牛尸红,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刹泄,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼外里,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了特石?” 一聲冷哼從身側(cè)響起盅蝗,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎姆蘸,沒想到半個月后墩莫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡逞敷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年狂秦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片推捐。...
    茶點故事閱讀 38,625評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡裂问,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情愕秫,我是刑警寧澤慨菱,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站戴甩,受9級特大地震影響符喝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜甜孤,卻給世界環(huán)境...
    茶點故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一协饲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缴川,春花似錦茉稠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至恋日,卻和暖如春膀篮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背岂膳。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工誓竿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谈截。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓筷屡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親簸喂。 傳聞我的和親對象是個殘疾皇子毙死,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,492評論 2 348

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

  • AngularJSAngularJS 是一個 MV* 框架, 最適于開發(fā)客戶端的單頁面應(yīng)用娘赴。它不是個功能庫规哲,...
    一直以來都很好閱讀 892評論 0 0
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設(shè)計動態(tài)web應(yīng)用的結(jié)構(gòu)框架诽表。首先唉锌,它是...
    200813閱讀 1,590評論 0 3
  • AngularJS 動畫 AngularJS 提供了動畫效果,可以配合 CSS 使用竿奏。AngularJS 使用動畫...
    hx永恒之戀閱讀 1,292評論 0 10
  • 前言:這是很久之前(大概2017年)寫的文檔袄简,Angular已經(jīng)更新到4.x版本,此文章關(guān)于Angular部分已經(jīng)...
    呆毛和二貨閱讀 450評論 0 0
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)泛啸。ng-model 指令也可以:...
    壬萬er閱讀 863評論 0 2