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の機能や応用を学んでいくことができます。