AngularJS Introduction


angularlogo

Here is what Wikipedia says about Angular JS: AngularJS (commonly referred to as “Angular” or “Angular.js”) is a complete JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

So, AngularJS is a JavaScript framework. It is a library written in JavaScript, for the front-end of your website.

It was built on the belief that declarative programming is the best choice to construct the user interface, while imperative programming is much better and preferred to implement an application’s business logic.

Here is some simple code that shows a little bit of what Angular JS can do. This specific code is not designed to be simply inserted into a WordPress page or post. Notice that within some tags there is “ng-” and a name. ng-init is a directive. AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the innerHTML of the paragraph element to the application variable name.

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

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

</body>
</html>

The above code could be copied into a text editor and saved as an html file and opened in a browser. For a bit more discussion on this code have a look at the post AngularJS Example 1 at this site.

At w3schools you can experiment with code in a live format. Very cool. Here is the results of the code above. It updates instantly. Below I show a screenshot of what’s displayed on the w3schools website. I used the Windows Snipping Tool to take the screenshot from w3schools.

angularjsconcatenate

If you look at the first section of code in this post you will notice a reference to the AngularJS library in the script tag. If you install AngularJS into WordPress, you won’t need that reference anymore.

There are several instructional videos on the Internet regarding WordPress using AngularJS. Here are some of them at WordPress.tv.

Leave a comment

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