AngularJS Basics

AngularJS provides a new style of use that differs from previous JavaScript libraries. This article explains its basic structure and features.
Tags:

What Is AngularJS?

AngularJS is a JavaScript library. If you say only that, many people may simply think, “Oh, I see,” and move on. Some may even lose interest right away.

You may think, “A JavaScript library? I do not really know what it is, but I do not especially need it. I have jQuery, and I am satisfied with that.”

Most JavaScript libraries people have known until now were basically things that “make JavaScript convenient.” Libraries like jQuery are often introduced because they make it much easier to get DOM elements or manipulate attributes.

Such libraries made it easier for programmers to write the programs they created themselves. You thought about the processing you wanted to write, and the library made it easier to create. That was what libraries had been until now.

So what is AngularJS? It provides JavaScript with a “new way” and introduces the concept of “MVC architecture.”

MVC is a concept for building an application with Model, View, and Controller. The Model handles data, the View handles screen display, and the Controller handles overall control and processing implementation. In server-side development, many frameworks designed around this concept are widely used.

MVC is a common concept, but it has not really applied to the client side, or web browsers. JavaScript code is often full of unorganized one-off processing. A single function accesses the server, performs logic, and manipulates the DOM. MVC separation is more like a dream, and many people have probably been buried in that kind of coding.

AngularJS cleanly separates data management, logic, and display-related work, then connects them smoothly. It is especially powerful for creating applications centered on CRUD, the basic data access operations of Create, Read, Update, and Delete.

AngularJS is available at the following site. However, you do not need to download the library from there, because AngularJS can be used without doing so.

https://angularjs.org/

Let Us Create an Example

Here, we will create a simple example using AngularJS.

For now, no installation or development environment is required. Use any suitable editor that can edit JavaScript. You also do not need to prepare a work server at first. It works even if you open the HTML file directly in the browser. If server access becomes necessary for Ajax later, you can think about it then.

The simple example code is shown below. Open a text editor, write it, and save it somewhere with the .html extension.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div>
    <p>input:<input type="text" ng-model="msg"></p>
    <p>you typed: {{msg}}.</p>
    </div>
</body>
</html>

Then open it in a browser.

This example provides only one input field. When you enter text there, it is displayed in the message below in real time. It is very simple, but you can somehow understand how AngularJS works.

Although it uses AngularJS, as you can see, there is no JavaScript code at all. In fact, a major advantage of AngularJS is that it does not only extend JavaScript. AngularJS extends HTML itself. Let us look more closely at how this works.

Loading AngularJS

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

AngularJS is generally loaded from Google and used. As shown above, you can use AngularJS through a <script> tag.

The ajax.googleapis.com site is a CDN site provided by Google. CDN stands for “Code Delivery Network,” a site that distributes widely used open source JavaScript code. Major open source JavaScript libraries such as jQuery and Prototype are mostly distributed here. By simply specifying the address of the library in src, you can use that library at any time.

Model and Markup

In the previous example, text entered in a field updates the display in real time because of the work of the “model” and “markup.” Let us explain the AngularJS features used in the example.

Specifying the Application

<html ng-app>

First, ng-app is specified in the <html> tag. This means “the inside of this tag is dynamically connected by AngularJS,” and app means application. In simple terms, it means “this tag is an AngularJS application.”

Here it is specified on the <html> tag because the whole HTML document is the target connected to AngularJS. If it is connected on <body>, only the inside of that tag becomes the target. As will be explained later, ng-app can be named and set multiple times, so you can also specify different named ng-app values on multiple tags inside <body>.

For now, just remember that if you specify ng-app on <html> or <body>, AngularJS becomes available.

Setting the Model

<input type="text" ng-model="msg">

The first important part in the page body is this. ng-model is specified. This is called a directive. A directive can be thought of as a newly added tag attribute provided by AngularJS.

The ng-model directive sets a “model.” A model represents data displayed on a web page. For example, ng-model="msg" specified here means that the value of <input type="text"> is associated with a model named msg.

Using Markup

This model value can be used in many places. Here it is written in the following form.

<p>you typed: {{msg}}.</p>

The {{OO}} syntax is markup newly provided by AngularJS. This markup is used to insert expressions or values into HTML. Here it is written as {{msg}}, which means the value of msg is displayed there.

With the model and markup, when the value of the field set in the model changes through input, the markup display changes immediately. These two elements are the most basic parts of using AngularJS, so be sure to remember them.

Initialization, Calculation, and Real-Time Manipulation

Now let us extend this a little and make something more useful.

Initialization and Calculation

The following is an example that calculates consumption tax.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-init="num = 100">
    <div>
    <p>price:<input type="text" ng-model="num"></p>
    <p style="font-weight:{{(num >= 10000) * 700}}">
        you typed: {{num * 1.08}}.</p>
    </div>
</body>
</html>

When you enter an amount in the field, the amount including 8% tax is displayed below. Also, when the amount is 10,000 or more, the amount display becomes bold.

Initialization Processing

This time, one new directive has been added.

<body ng-init="num = 100">

The ng-init directive initializes model values. If you specify it, the model value is initialized to the specified value.

Using Expressions

The markup part that displays the value has also changed a little. This time it displays a value with the following expression.

you typed: {{num * 1.08}}.

You can set expressions in markup like this. The calculation result is displayed automatically. It is simple.

If you look closely, there is another place where an expression is used in markup. It is the <p> tag that displays the result.

<p style="font-weight:{{(num >= 10000) * 700}}">

num >= 10000 becomes true when the value of num is 10000 or more, and false otherwise. Multiplying it by 700 casts the Boolean value, true or false, to an integer value, 1 or 0, resulting in 1 * 700 or 0 * 700. This makes the display bold when the value is 10000 or more.

Even with simple calculations, you can do interesting things in this way.

Manipulating Position and Size in Real Time

As another example of using models and markup, let us create an example that manipulates the position and size of a displayed DOM element in real time.

The example is as follows.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
    #rect {
        background-color:red;
        position:absolute;
    }
    </style>
</head>
<body ng-init="x = 100;y = 100; w = 100;h = 100">
    <div>
    x:<input type="number" min="0" max="300" ng-model="x" size="5">
    y:<input type="number" min="0" max="300" ng-model="y" size="5">
    w:<input type="number" min="0" max="300" ng-model="w" size="5">
    h:<input type="number" min="0" max="300" ng-model="h" size="5">
    </div>
    <div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">
    </div>
</body>
</html>

When you change the values of the four fields, the position and size of the red rectangle change in real time.

Here, values are initialized in the <body> part.

<body ng-init="x = 100;y = 100; w = 100;h = 100">

When initializing multiple values, you can write them separated by semicolons like this. In other words, you simply write JavaScript code.

You already know that ng-model is defined on <input type="number">. The entered values are stored in x, y, w, and h. Then these values are used to set the display of the rectangle <div>.

<div id="rect" style="left:{{x}}px;top:{{y}}px;width:{{w}}px;height:{{h}}px">

Markup with {{}} can be inserted into style attribute values like this. Markup can be used anywhere in HTML, and its values can be manipulated.

What do you think? We have still written almost no JavaScript code except variable initialization, yet it already seems possible to do many interesting things. Try using models and markup to manipulate various values in HTML.