AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標籤添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML,且通過 表達式 綁定數據到 HTML。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發布的,可通過 script 標籤添加到網頁中:
我們建議把腳本放在 <body> 元素的底部。 這會提高網頁加載速度,因為 HTML 加載不受製於腳本加載。 |
各個 angular.js 版本下載: https://github.com/angular/angular.js/releases
AngularJS 擴展了 HTML
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
AngularJS 實例
嘗試一下 »
實例講解:
當網頁加載完畢,AngularJS 自動開啟。
ng-app 指令告訴 AngularJS,<div> 元素是 AngularJS 應用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。
如果您移除了 ng-app 指令,HTML 將直接把表達式顯示出來,不會去計算表達式的結果。 |
什么是 AngularJS?
AngularJS 使得開發現代的單一頁面應用程序(SPAs:Single Page Applications)變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重復 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背後"添加代碼。
- AngularJS 支持輸入驗證。
AngularJS 指令
正如您所看到的,AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程序變量。
AngularJS 實例
嘗試一下 »
HTML5 允許擴展的(自製的)屬性,以 data- 開頭。 AngularJS 屬性以 ng- 開頭,但是您可以使用 data-ng- 來讓網頁對 HTML5 有傚。 |
帶有有傚的 HTML5:
AngularJS 實例
嘗試一下 »
AngularJS 表達式
AngularJS 表達式寫在雙大括號內:{{ expression }}。
AngularJS 表達式把數據綁定到 HTML,這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式:它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 實例
嘗試一下 »
AngularJS 應用
AngularJS 模塊(Module) 定義了 AngularJS 應用。
AngularJS 控製器(Controller) 用於控製 AngularJS 應用。
ng-app指令指明了應用, ng-controller 指明了控製器。
AngularJS 實例
嘗試一下 »
AngularJS 模塊定義應用:
AngularJS 模塊
AngularJS 控製器控製應用:
AngularJS 控製器
在接下來的教程中你將學習到更多的應用和模塊的知識。
在 Cloud Studio 中使用 AngularJS
step1:訪問 騰訊云開發者平台,注冊/登錄賬戶。
step2:在右側的運行環境菜單選擇:
"ubuntu"
step3:在左側代碼目錄中新建 html 目錄,編寫你的 HTML 代碼,例如 index.html
step4:在 index.html 文件的中粘貼如下代碼、來引入 AngularJS:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
step5:在終端中輸入命令
sudo vim /etc/nginx/site-enable/default
。將配置文件紅框部分修改為如下圖所示,然後輸入命令:sudo nginx restart
重啟 nginx 服務( nginx 安裝完成併啟動後默認會監聽80端口。我們需要將 nginx 的站點目錄以及監聽的端口號改為我們需要的)step6:點擊最右側的【訪問鏈接】選項卡,在訪問鏈接面板中填寫端口號為:8080(和剛才 nginx 配置文件中的端口號一致),點擊創建鏈接,即可點擊生成的鏈接訪問我們剛剛編寫的代碼,查看 AngularJS 傚果。
現在 CODING 正在舉辦一場基於 Cloud Studio 工作空間的【我最喜愛的 Cloud Studio 插件評選大賽】。進入活動官網:https://studio.qcloud.coding.net/campaign/favorite-plugins/index,了解更多活動信息。