5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スコープ($scope)とは、**テンプレート(HTML側、View側)**とJavaScript(angularのモジュール)によるモデルとを橋渡しするためのオブジェクト。AngularJSの世界では、テンプレートで利用する値や挙動1はスコープを介して引き渡すのが、まず基本です。

**コントローラー(JS)**とは、このスコープを準備するための仕組みです。例えばコントローラー(jsモジュール、angularモジュール)で準備したメッセージ(=msgプロパティ)の値を、ページに反映させたりします。

JSPとrequest,sessionの関係に似ています。

データバインディングとは、JavaScriptのオブジェクト(モデル)をHTMLテンプレート(ビュー)に結び付けるための機能。双方向データバインディングと呼ばれます。いったん、ビュー/モデルをひも付けた後は、ビューの変更はモデルに反映され、モデルの変更もまたビューに反映されます。

ng-model(html側)に入力した値は、$scopeに格納され、controller(JS側、angularモジュール)に届けられます。angularモジュールで$scopeの中の変数の値が変更されると、HTMLに反映されます。要は双方向ということです。

要素のテキストボックスにはデフォルト値は表示させるには
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
// テキストボックスにデフォルト値を与える
$scope.name = '権兵衛';

データバインディングの別の方法
ng-bind

ng-cloak

双方向データバインディング

シンプルなルーティング機能
HTML ベースのテンプレート機能
非同期通信のサポート
数多くのビルトインディレクティブ
フィルタ機能
Dependency Injectionによるモジュール管理
セキュリティ対策
テスト

ng-bind属性によるデータバインディング

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?