JP Coders

Published on

AngularJS入門・サンプルコードで簡単なアプリを作ってみよう

AngularJS入門・サンプルコードで簡単なアプリを作ってみよう

AngularJSを使って、非同期で文字数をカウントするアプリを作成する方法を以下に示します。

サンプルコード

以下のコードは、入力されたテキストの文字数をリアルタイムで表示するAngularJSのサンプルです。CDNへのリンクを忘れずに追加してください。

<body>

  <div ng-app="dev">
    <br>
    <br>
    <div class="container" ng-controller="devCtrl">
      <p>Text : <input type="text" ng-model="name"></p>
      <pre>
        文字数: {{ (name + '').length }}
      </pre>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('dev', []);

    app.controller('devCtrl', function($scope) {
      $scope.name = '文字を入力してね';
    });
  </script>

</body>

解説

  • <input>要素でテキストを入力すると、ng-model="name"によって入力された値が$scope.nameにバインドされます。
  • <pre>タグ内で{{ (name + '').length }}とすることで、$scope.nameの文字列の長さを非同期で表示します。
  • JavaScriptメソッドが必要な場合は、同じ方法で実装できます。

このサンプルをベースに、さまざまなAngularJSの機能や応用を学んでいくことができます。

Authors
  • avatar
  • Name
  • 情報技術者 / Z世代プログラマー / 米大学院にてデータサイエンスを学ぶ

  • ITプロフェッショナルとして活動しています。React.js等のモダンなウェブ制作・アプリ開発を得意としており、Java・Python・Rust等のプログラミング言語を用いたソフトウェア開発全般を行っています。

お手伝いできますか? 🤝

他の方法でのご連絡をご希望ですか?
web制作ご依頼受付中

本記事で掲載している情報やコードは執筆時点のものであり、動作を保証するものではありません。 自己責任のもと、プログラムの実行や情報の利用にあたってはご注意ください。


本記事には提携する企業の広告が含まれる場合があります。