AngularJS インスタンス

自分で試してみてください

サンプルをオンラインで編集して、ボタンをクリックして結果を確認してください。

AngularJS インスタンス

<div ng-app="">
<p>名前: <input type="text" ng-model="name"></p>
<p>あなたが書いた内容: {{ 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 介绍