Angular學習(一)

1.簡介
AngularJS 是 Angular 1.x 的專屬名字,Angular 2 之後的版本纔開始稱爲 Angular;
Angular 2 也不是從 Angular 1 升級過來的,Angular 2 使用了 TypeScript 進行重寫,所以 AngularJS 和 Angular 之間的差別比較大,即便你用過 AngularJS,上手 Angular 也有一定的學習曲線,基本上可以認爲 Angular 是一個全新的框架。

(1)1.x版本AngularJS,開源項目下載:https://github.com/angular/angular.js/releases

使用NPM構建(angular.js)源碼問題>https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

使用:引入angular.js/angular.min.js
源碼處理參考:https://github.com/angular/angular.js/blob/master/DEVELOPERS.md
或者直接去國外CDN,百度CDN下載;或者jsfiddle上練手
本次下載1.6版本
(2)區別2.0後其他版本,稱爲Angular,https://github.com/angular/angular

2.關於AngularJS
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁面。
AngularJS 通過指令擴展了 HTML,且通過 表達式 綁定數據到 HTML。
備註:
(1)angular與ng是一回事,語法中都是ng表示;
(2)<script src="../angular.js/1.6.0/angular.min.js"></script>
當網頁加載完畢,AngularJS 自動開啓
3.AngularJS 指令,即以 ng 作爲前綴的 HTML 屬性
常見指令:AngularJS 通過 ng-directives(被稱爲新的指令的HTML屬性) 擴展了 HTML。
(1)ng-app 指令定義一個 AngularJS 應用程序。即告訴 AngularJS,指定的DOM元素是 AngularJS 應用程序 的"所有者"。
(2)ng-model 指令把元素值(比如輸入域的值)雙向綁定到應用程序變量name。即ng-model定義一個變量,在視圖中可調用該變量,並使視圖和內存的數據同步;
(3)ng-bind 指令把應用程序變量 name 綁定到 HTML 視圖(某個段落的 innerHTML)。
(4)ng-init 指令初始化 AngularJS 應用程序變量。(不常用)

4.AngularJS 應用組成如下:
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數,可以添加或修改屬性。

備註:
HTML5 允許擴展的(自制的)屬性,以 data- 開頭;
AngularJS 屬性以 ng- 開頭,但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
發佈了54 篇原創文章 · 獲贊 2 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章