More than 5 years have passed since last update.

AngularJSでHelloWorld!を表示しました

Last updated at 2014-11-05Posted at 2014-10-16

AngularJSでHelloWorld!をやるのにどの段階が相応しいかわかりませんが、inputタグにng-modelを指定して表示するのがいいのかなと考えました。

AngularJSでHelloWorld!

<!doctype html>
<html ng-app>
  <head>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>-->
  </head>
  <body>
    <div>
      <label>名前:</label>
      <input type="text" ng-model="yourName" placeholder="HelloWorld!を入力してください">
      <hr>
      <span>こんにちは {{yourName}}</span>
    </div>
  </body>
</html>

angular.min.jsのファイルはローカルに置いてあります。

実際にブラウザで表示して、inputタグに入力すると、以下画像のように表示されます。

AngularJSの動きを見せるのはスクリーンショットだとわかりづらく動画のほうがいいかも

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up