AngularJS 實例

自己嘗試一下

您可以在線編輯示例，然后單擊按鈕查看結果。

AngularJS 實例

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>
</div>

親自試一試

AngularJS 基礎

• 我的第一個 AngularJS 指令
• 我的第一個 AngularJS 指令（符合 HTML5 標準）
• 我的第一個 AngularJS 表達式
• 一個簡單的 AngularJS 表達式，使用變量
• 我的第一個 AngularJS 控制器

基本 AngularJS 介紹

AngularJS 表達式

• 一個簡單的表達式
• 沒有 ng-app 的表達式
• 包含數字的表達式
• 使用 ng-bind 綁定數字
• 包含字符串的表達式
• 使用 ng-bind 綁定字符串
• 包含對象的表達式
• 使用 ng-bind 綁定對象
• 包含數組的表達式
• 使用 ng-bind 綁定數組

表達式介紹

AngularJS 模塊

• AngularJS 控制器
• 文件中的模塊和控制器
• 何時加載 AngularJS

模塊介紹

AngularJS 指令

• AngularJS 指令
• ng-model 指令
• ng-repeat 指令（用于數組）
• ng-repeat 指令（用于對象）
• 創建一個新指令
• 將新指令用作元素
• 將新指令用作屬性
• 將新指令用作類
• 將新指令用作注釋
• 帶有限制的指令

指令介紹

AngularJS 模型

• AngularJS 模型
• 具有雙向綁定的模型
• 具有驗證的模型
• 表單及其當前驗證狀態
• 字段無效時設置 CSS 類

模型介紹

AngularJS 控制器

• AngularJS 控制器
• 控制器屬性
• 控制器函數
• JavaScript 文件中的控制器 I
• JavaScript 文件中的控制器 II

控制器介紹

AngularJS 作用域

• AngularJS 作用域
• 作用域是同步的
• 不同的作用域
• 根作用域

作用域介紹

AngularJS 過濾器

• 表達式過濾器 uppercase
• 表達式過濾器 lowercase
• 表達式過濾器 currency
• 指令過濾器 orderBy
• 輸入過濾器

過濾器介紹

AngularJS XMLHttpRequest

• 讀取靜態 JSON 文件

XMLHttpRequest 介紹