Getting Started with AngularJS: Creating a Simple App with Sample Code
Here’s how to create an app that counts characters asynchronously using AngularJS.
Sample Code
The following code is an AngularJS sample that displays the character count of the entered text in real-time. Don’t forget to add the CDN link.
<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>Explanation
- When text is entered in the
<input>element, the entered value is bound to$scope.namebyng-model="name". - By writing
{{ (name + '').length }}in the<pre>tag, the length of the$scope.namestring is displayed asynchronously. - If JavaScript methods are needed, they can be implemented in the same way.
Based on this sample, you can learn various AngularJS features and applications.