AngularJS 基礎の基礎


AngularJS 基礎

しばらく AngularJS の基礎的なことを中心に書いていく。

AngularJS の基礎として、まず AngularJS のページ で一番初めにあるコードから、AngularJS に関する部分を簡単に。



Hello {{yourName}}!


index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>
  • ng-app

    • AngularJS が動作する範囲を指定。
    • ページ全体とする場合は<html ng-app>とし、<head>を対象外とするなら<body ng-app>とする。
    • より限定的に、<div ng-app>でも構わない。
  • ng-model

    • フォームとモデルをリンクし、どちらかでの変更を他方に反映する。
    • この例の場合はテキストボックスへの入力値が即座に yourName プロパティに反映される。
  • {{yourName}}

    • yourName プロパティの値を HTML に表示するコード。
    • yourName プロパティの変更が即座に反映される。

この例は、jsFiddle でコードを編集して試すことができる。