Angular基礎教程(一)

angular:庫、框架!

是一個mvc的框架!

衍生出來好多其他名稱:mvp mvvm mv*...

現階段比較火!------谷歌一直在推用!

angular不僅僅是因為谷歌在推它使用它,它才火的,是因為它本身有很大的優點!

為什么angular叫mvc框架呢?

m-----model ?數據

v-----view ? 視圖

c-----conteroller ?控制器

****用控制器把數據展示(視圖)出來

操作數據!----靠譜的框架!(減少了很多dom操作)

以后大家寫angular項目的時候最好放在服務器里面!

學習一個庫最最最最簡單的了解就是擼它的官網對吧:進入官網:https://angularjs.org/

目的:1.為了下載這個庫 ? ?2.為了查看它的手冊


說一下angular版本

1.2.x 之前的版本---有很大問題!

1.3.x 之后版本

1.3.10---現在公司大多都用這個!

1.4.2

2.x.x? 全新版本。完全是一個新庫!里面用法大改!


怎么玩這東西?

1.引入咱angular----專門來pc端的!

***只要一引入框架,那么就可以使用angular的基本功能!

2.開始使用里面一些基本功能用法:

angular.bind(this的指向,函數)

function show(){alert(this);}

//show.call(12);

var c=angular.bind(12,show);

c();


angular.copy(克隆誰,克隆到哪里去);

***同類型!


angular.equals(a,b)----比較倆個東西是否相等!

里面都是NaN的是true!


angular.forEach() ------用來循環的!

angular.forEach(循環對象,function(值,k){//value,key

//console.log(v);

console.log(k);

})

可以循環json arr 普通!


angular.isArray()? ? 判斷它是否是一個數組!

--------------------------------------------------

angular.isDate()? ? ? 判斷是否是一個日期!

--------------------------------------------------

angular.lowecase()? ? 轉小寫!

-------------------------------------------------

angular.module()? ? -----模塊化開發!!!

***重點內容,后面主要會說!

--------------------------------------------------

基本用法:

angular開發采用的機制:命名空間機制!

比如:

? ? ? ? css:

? ? ? ? .css-red{}

? ? ? ?.css-blue{}

? ? js:

? ? ? ? ? var web={}

? ? ? ? ? web.add={}

? ? ? ? ? ?web.add={}

模板:

{$name}


主要以數據為主!

ng-model="a" -----定義一條數據!

<span>{{a}}</span>? {{a}}{{a}}---展示數據!

給他們父級添加: ng-app----開啟angular的應用模式:或者說是一個管轄范圍!?

***注意:

1.ng-app頁面中只能有一個!(第一管用后面的不管用!)

2.建議大家把它放在html標簽里面!一下是倆種數據展示方式:

<input type="text" ng-model="a"><br/>

<span>{{a}}</span>---建議用這個

<span ng-bind="a"></span>---綁定一個數據展示

=====================================================

ng-name 統一稱為:指令

指令(directive)作用:

? ? ? ? ? ? ? ? ? ? ?擴展html語法

學了幾個指令:

? ? ? ? ? ? ? ng-app

? ? ? ? ? ? ? ng-model="" 定義一個數據!

? ? ? ? ? ? ? ng-bing="" 綁定一個數據展示出!

------------------------------------------------------------------

讓一個div消失!

ng-show="true/false"

ng-hide="true/false"

=================================================

點擊按鈕讓一個塊元素顯示隱藏:

<div ng-init="a=false">//定義一個初始數據(變量a=false)

? ? ? <input type="button" value="按鈕" ng-click="a=!a"/><br/>(點擊按鈕時改變a的值)

? ? ? <div id="box" ng-show="a"></div>(最后把這個值給ng-show)

</div>

事件:

ng-click="a=!a"

ng-mouseover="a=!a"

ng-mouseout="a=!a"

.................................

-------------------------------------------------------------------------------------

介紹一個比較重量級的指令:

? ? ? 指令里面也有一個東西也是做循環的!

ng-repeat="" ?循環!

<div ng-init="arr=['智能社','淘寶網','百度一下','阿里巴巴','京東網']">

? ? ? ? ? <ul>

? ? ? ? ? ? ? ? <li ?ng-repeat="value in arr"></li>

? ? ? ? ?</ul>

</div>

======================================================

以上的代碼少點東西:(上面一直在講m和v)

? ? ? ? ? ? ?其實是少C---控制器!

-----------------------------------------------------------------------------------------

angular控制器---稍微有點繁瑣!

步驟:

1.首先就是定義一個控制器!

function show($scope){//在這個里面叫定義控制器!

? ? ? ? ?//$scope全局對象 有點類似于window

? ? ? ? ?$scope.a=12;

}

<div>{{a}}</div>

-------------------------------------------------------------------

$scope

屬于angular特色:

雙向數據綁定、依賴注入!

依賴注入:$scope是固定的,寫死! 跟順序無關!

function show(b,a){} ----->show(12,34)

======================================

1.3.10版本沒有上面定義控制器的方法!!!

新方法:(修改上面1.0以前定義控制器方法)

****采用了:模塊化的開發!

注意:定義控制器改變了,展示數據的時候沒變!

//angular.module(模塊名,[依賴模塊],配置函數);

var mk=angular.module(模塊名,[])

***angular.module里面必須默認保持有兩項!

===============================================

1.先創建一個模塊:

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

2.把模塊名字給ng-app

3.在模塊里面定義一個控制器:

app,controller('show',function($scope)){

$scope.a=12;

}

4.展示控制器里面的數據:

<div ng-controller="show">{{a}}</div>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,622評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,716評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,746評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,991評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,706評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,036評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,029評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,203評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,725評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,161評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,857評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2 380

推薦閱讀更多精彩內容