Angular.js初步認知

時間 2019-12-11

標籤 angular.js angular 初步認知欄目 AngularJS 简体版

原文原文鏈接

第一部分 Angular.js簡介

Angular.js是一款基於JavaScript語言的框架,目的是爲了克服HTML在構建應用上的不足.css

注意這裏說的Angular.js是框架而不是類庫,類庫和框架都是用來解決靜態頁面技術上構建動態應用的問題的,可是二者卻不是一個概念.angularjs

類庫: 指一些函數的集合,封裝一些可複用的代碼塊,可是類庫自己須要開發者主動調用各類方法才能實現功能,如jQuery等.數組

框架: 指一種特殊的，已經實現了的WEB應用,框架會根據開發者填充的具體業務邏輯來調用開發者寫的代碼,如angularjs等.app

框架的類型有許多，有的是基於js的,有的是基於css的.框架

Angular.js最爲核心的特性有:MVC,模塊化,自動化雙向數據綁定等.模塊化

其中MVC指的是Model View Controller，M是指業務模型，V是指用戶界面，C則是控制器，使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序可使用不一樣的表現形式.函數

第二部分 Angular.js的主要組成

1. 表達式

　　在Angular.js中,能夠在HTML的body中使用{{}}來表示一個angular表達式,在表達式中能夠包裹如下幾種狀況:對象

　　a 字符串,以及字符串的拼接,表達式會將處理的結果輸出ip

　　b 數字,以及數字的基本運算,表達式會將運算結果輸出開發

　　c 三元表達式,表達式會先判斷三元表達式的處理結果,而後將最終結果輸出

　　d 布爾值,若是表達式內爲判斷式,會先進行判斷,將判斷出來的布爾值進行輸出

　　e 數組,直接輸出成字符串

　　f 對象,直接輸出成字符串

2. 指令

　　指令是Angular.js對HTML標籤的拓展屬性,都是以ng-開頭的屬性名稱

　　Angular.js提供的指令有許多,在如今初步認知中需先掌握如下幾種指令的意義及用法

　　a ng-app: 劃分Angular.js程序的管理範圍,一般是給body或者div等設置屬性,設置完成後對應標籤內的與Angular有關的代碼會被Angular程序解析執行

　　b ng-init: 初始化參數,直接寫在須要初始化參數的標籤中

　　c ng-model: 將設置的參數與標籤的value值綁定,這裏綁定完成後會實現雙向數據綁定,value值一般爲表單元素的內容取值

　　d ng-bind: 也是講設置的參數與標籤中的內容綁定,可是這裏至關於給標籤設置innerHTML值,而且只能設置不能獲取值

　　e ng-click: 標籤被點擊時觸發

3. Angular模塊

　　在業務邏輯較爲簡單的狀況下,咱們能夠考慮不使用js帶來實現功能,可是若是須要實現的功能較多,或者實現的功能邏輯較爲複雜的狀況下,咱們仍是會使用JS碼來實現Angular.js中的功能.

　　固然Angular也有較爲規範的代碼順序:

　　a 在HTML中引用angular.js的文件

　　b 在一對script標籤中建立模塊和控制器

angular.module('default',[])

　　　　.controller('default',function ($scope) {})

</script>

　　c 在控制器處理函數中,設置參數或者方法,這個過程在angular中也能夠稱爲暴露參數和暴露行爲

　　d 劃定angular模塊的管理範圍,和劃定控制器的管理範圍

　　e 將對應控制器暴露的參數和行爲綁定到對應的位置

　　在對應位置設置ng-model="",或者設置ng-click=""等

angular的代碼順序能夠看出來angular的模塊化的特性

第三部分 Angular.js的初步注意點

1. 在一個HTML頁面中只會執行一個angular模塊內的代碼,若是在一個頁面中定義了兩個或以上的angular模塊,只會將第一個模塊內對應的angular代碼解析並執行,其餘的angular代碼不會被執行,會原樣輸出

2. 控制器內對應的代碼只有控制器在模塊範圍內纔會被解析執行

3. 一個模塊中能夠存在多個控制器,每一個控制器控制不一樣的參數和行爲

4. angular.js能夠配合jQuery使用,可是jQuery須要在angular.js以前被HTML引用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。