- 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
- Name
- Shou Arisaka / 有坂 翔
- 情報技術者 / Z世代プログラマー / 米大学院にてデータサイエンスを学ぶ
- ITプロフェッショナルとして活動しています。React.js等のモダンなウェブ制作・アプリ開発を得意としており、Java・Python・Rust等のプログラミング言語を用いたソフトウェア開発全般を行っています。
- Github 🐙StackOverflow 🔥Qiita 📝
- TechFreeTools 🔧About.me 👤