AngularJs基本特性解析(一)
現(xiàn)在的前端項(xiàng)目中基本上都會(huì)用到angularjs框架,之前并不了解這個(gè)框架,也是因?yàn)樽罱邮值捻?xiàng)目,所以打算好好的學(xué)習(xí)下它。之前都是搞pc端,現(xiàn)在接手的是移動(dòng)端的項(xiàng)目,移動(dòng)端UI框架用的是ionic+vordova,沒有用bootstrap,主要做的是ios+安卓的app界面,ionic這個(gè)框架也不太了解,也需要花時(shí)間好好熟悉下。angularjs學(xué)習(xí)小白一枚,歡迎大神指正。
AngularJs是什么?
簡(jiǎn)單來說,即javascript的一個(gè)框架,通過script標(biāo)簽添加到網(wǎng)頁(yè)中。即我們使用angularjs時(shí),需要引入下面的代碼。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
通常建議把腳本放在<body>元素的底部,作用是:提高網(wǎng)頁(yè)加載速度。因?yàn)閔tml加載不受制于腳本加載。
AngularJs的作用?
AngularJS 使得開發(fā)現(xiàn)代的單一頁(yè)面應(yīng)用程序(SPAs:Single Page Applications)變得更加容易。
•AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
•AngularJS 可以克隆和重復(fù) HTML 元素。
•AngularJS 可以隱藏和顯示 HTML 元素。
•AngularJS 可以在 HTML 元素"背后"添加代碼。
•AngularJS 支持輸入驗(yàn)證。
像現(xiàn)在移動(dòng)端基本上使用單頁(yè)面的比較,就是利用angular的路由轉(zhuǎn)換進(jìn)行的。像我們現(xiàn)在這個(gè)項(xiàng)目也是使用的單頁(yè)面。即在主頁(yè)面里面,即跳轉(zhuǎn)的頁(yè)面都在主頁(yè)面里面進(jìn)行。截圖如下:
AngularJs表達(dá)式
AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi):{{ expression }}。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML,這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式:它們可以包含文字、運(yùn)算符和變量。
<!doctype html> <!-- 標(biāo)記angularjs處理整個(gè)html頁(yè)并引導(dǎo)應(yīng)用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <p>name:{{"ting"+"feng"}}</p> <p>number:{{5+5}}</p> <div ng-init="person={name:'tingfeng',age:'13'}"> <p>name:{{person.name}} age:{{person.age}}</p> </div> </body> </html>
AngularJs在html中的應(yīng)用
主要通過ng-directive擴(kuò)展html,angularjs指令是以ng作為前綴的html屬性,包含有四大特性:mvc,模塊化,指令系統(tǒng)(directive),databinding
ng-init:該指令初始化angularjs應(yīng)用程序變量。比如下面的列子:
<!doctype html> <!-- 標(biāo)記angularjs處理整個(gè)html頁(yè)并引導(dǎo)應(yīng)用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-init="name='tingfeng'"> <p>name is:<span ng-bind="name"></span></p> </div> </body> </html>
ng-app:該指令表示定義一個(gè)angularjs應(yīng)用程序。通常放在html后面,也可以在局部使用ng-app指令,比如<div ng-app>則angularjs腳本僅在該div中運(yùn)行,即表明從此處開始,所有內(nèi)容均為angularjs進(jìn)行管理。
ng-model:該指令是指把元素值(比如輸入框的值)綁定到應(yīng)用程序中。
ng-bind:該指令是把應(yīng)用程序數(shù)據(jù)綁定到html視圖中。使用相應(yīng)的指令,即可利用angularjs操作html頁(yè)面。具體怎么使用,我們來看看代碼。
此時(shí)利用ng-model綁定到setname模型變量上,當(dāng)在輸入框中輸入值時(shí),相應(yīng)的setname也會(huì)變化??勺孕匈N碼測(cè)試。
關(guān)于$scope解釋
$scope是什么?有什么作用?如何使用它?
簡(jiǎn)單來說,scope是一個(gè)pojo(plainoldjavascriptobject),類似于一個(gè)對(duì)象,有屬性和方法, scope是一個(gè)pojo(plainoldjavascriptobject),類似于一個(gè)對(duì)象,有屬性和方法,scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope進(jìn)行的。
特性:1.是表達(dá)式的執(zhí)行環(huán)境(或者作用域)
2.scope是一個(gè)樹型結(jié)構(gòu),與dom標(biāo)簽平行,其上含有一個(gè) scope是一個(gè)樹型結(jié)構(gòu),與dom標(biāo)簽平行,其上含有一個(gè)rootscope處于最頂層。
3.scope會(huì)繼承父 scope會(huì)繼承父rootscope的屬性和方法。
4.$scope可以傳播事件,類似于dom,可以向上傳播也可以向下。
5.$scope不僅是mvc的基礎(chǔ),也是后面實(shí)現(xiàn)雙向綁定的基礎(chǔ)。
AngularJs的組成部分
模板:即編寫的html和css的文件,展現(xiàn)應(yīng)用的視圖。angularjs可以在html中構(gòu)建自己的html標(biāo)記!
控制器:與ajax不同,不需要另外編寫偵聽器或dom控制器,因?yàn)樗呀?jīng)內(nèi)置到angularjs中。 好處:便于編寫,測(cè)試,維護(hù)和理解。
模型數(shù)據(jù):模型是從angularjs做用域?qū)ο蟮膶傩砸甑?。模型的?shù)據(jù)可能是js對(duì)象,數(shù)組或基本類型,但都屬于angularjs作用域?qū)ο蟆?br />
如何理解angularjs中的作用域?
即一個(gè)作用域可以視作模板,模型和控制器協(xié)同工作的粘接器,angularjs使用作用域,同時(shí)還有模板中的信息,數(shù)據(jù)模型和控制器。這些可以幫助模型和視圖分離,但他們兩者確實(shí)時(shí)同步的!任何對(duì)于模型的更改都會(huì)即時(shí)反映到視圖上,任何視圖的更改都會(huì)被立刻體現(xiàn)在模型中。
視圖:在angularjs中,一個(gè)視圖是模型通過html模板渲染之后的映射。即不論模型什么時(shí)候發(fā)生變化,angularjs會(huì)實(shí)時(shí)更新結(jié)合點(diǎn),隨之更新視圖。
還是貼碼來看,更加直觀!
<!doctype html> <html ng-app="HelloAngular"> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //模塊化 var myModule = angular.module("HelloAngular", []); --控制模板HelloAngular myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.value = { name: 'jiangting' }; } ]); </script> </head> <body> <!-- mvc看angular--> <div ng-controller="helloAngular"> --控制器為helloAngular <p>{{value.name}},hello!</p> </div> <!-- angular 模塊化 --> </body> </html>
我們來看看controller的應(yīng)用,即控制器,即控制器通過操作數(shù)據(jù),將其進(jìn)行綁定,展現(xiàn)在html頁(yè)面上。
AngularJS 模塊(Module) 定義了 AngularJS 應(yīng)用。
AngularJS 控制器(Controller) 用于控制 AngularJS 應(yīng)用。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器。我們用上面的列子來看:
AngularJS模塊定義應(yīng)用:
var myModule = angular.module("HelloAngular", []); --控制模板HelloAngular
angularjs控制器控制應(yīng)用:
myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.value = { name: 'jiangting' }; } ]);
了解前端mvc
關(guān)于controller特性:
1.不要試圖去服用controller,一個(gè)控制器一般只負(fù)責(zé)一個(gè)小塊視圖
2.不要直接在controller中操作dom,這不是其職責(zé)
3.不要在controller里面做數(shù)據(jù)過濾的操作,ng有filter服務(wù)
4.不要在controller里面做數(shù)據(jù)格式化,ng有很好用的表單控件
5.controller是不會(huì)互相調(diào)用,控制器之間的交互會(huì)通過事件進(jìn)行,通過 filter服務(wù)4.不要在controller里面做數(shù)據(jù)格式化,ng有很好用的表單控件5.controller是不會(huì)互相調(diào)用,控制器之間的交互會(huì)通過事件進(jìn)行,通過scope進(jìn)行調(diào)用
下面看下如何自定義指令系統(tǒng),代碼如下:
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //指令系統(tǒng) var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'E', template: '<div>Hi everyone!</div>', --這里我們插入一段html標(biāo)簽 replace: true } }); </script> </head> <body> <hello></hello> </body> </html>
directive中,后面返回有三個(gè)參數(shù),其中template中指所插入的html標(biāo)簽。現(xiàn)在我門自己來寫一段html代碼,看看如何將其變?yōu)閍ngularjs的寫法。
原靜態(tài)html代碼如下:
<ul> <li> <span>new1</span> <p>just a test page1</p> </li> <li> <span>new2</span> <p>just a test page2</p> </li> </ul>
將其改版為angularjs的寫法如下:
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> //$scope為控制器的作用域, //angularjs作用域:可以視作模板,當(dāng)應(yīng)用啟動(dòng)之后,會(huì)有一個(gè)根作用域被創(chuàng)建出來,而控制器的作用域是根作用域的一個(gè)典型后繼。 function newsCtrl($scope){ $scope.news=[ {"content":"new1", "introduce":"just a test page1"}, {"content":"new2", "introduce":"just a test page2"} ]; $scope.phones={ length:"4" // 單個(gè)的屬性不能加分號(hào),多個(gè)屬性用逗號(hào)分隔 }; } </script> </head> <body ng-controller="newsCtrl"> <ul> <li ng-repeat="new in news"> {{new.content}} <p>{{new.introduce}}</p> </li> </ul> </body> </html>
以上所述是小編給大家介紹的AngularJs基本特性解析(一),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
解決angular 使用原生拖拽頁(yè)面卡頓及表單控件輸入延遲問題
這篇文章主要介紹了angular 中使用原生拖拽頁(yè)面卡頓及表單控件輸入延遲問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Angular項(xiàng)目過大時(shí)的合理拆分angular?split
這篇文章主要為大家介紹了Angular項(xiàng)目過大時(shí)的合理拆分angular?split示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲(chǔ)
這篇文章主要介紹了AngularJS之ionic 框架下實(shí)現(xiàn) Localstorage本地存儲(chǔ),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04AngularJS中的$parse服務(wù)與$eval服務(wù)用法實(shí)例
這篇文章主要介紹了AngularJS中的$parse服務(wù)與$eval服務(wù)用法,結(jié)合實(shí)例形式分析了AngularJS中$parse服務(wù)與$eval服務(wù)的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件
這篇文章主要介紹了詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10