AngularJS Example 1


Input something in each of the input boxs:

Name:

Name:

The above display was achieved with the code shown here:

<div data-ng-app="" data-ng-init="mySpacebar=' '">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
<p>Name: <input type="text" data-ng-model="name2"></p>
<p data-ng-bind="name + mySpacebar + name2"></p>
</div>

This is a WordPress site and the code shown here is exactly the same as what I have in this post except that I do not need to include the two html tags. Try this code independently of WordPress with the code below. To do that, simply create an HTML text file with the code below, save it, and open it with a browser.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="mySpacebar=' '">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
<p>Name: <input type="text" data-ng-model="name2"></p>
<p data-ng-bind="name + mySpacebar + name2"></p>
</div>

</body>
</html>

Here is what it looks like in a browser. Notice that the spacebar works. It wasn’t working before. Why? I was using the Angular plugin. I abandoned that idea for the CDN method instead. Notice that you need to get the Angular library code with the script tag. So what is the most recent version of Angular? So what is the most recent stable release of Angular? You can go to Wikipedia for that. Be careful! Version 2 and above is different. In fact, using version 2.0.1 does not work using the above code.

angularex1

Leave a comment

Your email address will not be published. Required fields are marked *