Lesson 02: Introduction to AngularJS Programming

AngularJS and Code

A JavaScript Section for AngularJS

There are many operations you can perform in AngularJS without writing any code. For some complex operations, you will need to write code. You have various options. At a minimum, in a webpage, you can create a regular JavaScript section. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

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

<script>

</script>

</body>
</html>

In the section, you can add any type of code you would use in JavaScript.

Introduction to Variables

AngularJS supports variables exactly as they are declared and used in JavaScript, to store and hold values in the computer memory. JavaScript supports data types for values although they are not used to declare variables. The types are known as integers (natural numbers), floating-point numbers, strings, etc.

As a reminder, to declare a variable in JavaScript or AngularJS, use the var keyword followed by a name for the variable. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var number;
</script>
</head>
<body>

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

<script>
    var name;
</script>

</body>
</html>

As a reminder, to initialize a variable in JavaScript, assign the desired value to it. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var number = 128;
</script>
</head>
<body>

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

<script>
    var name = "George Weah;
</script>

</body>
</html>

As a reminder, to declare many variables in JavaScript, you can use a single var keyword. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var firstName, middleName, lastName;
</script>
</head>
<body>

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

<script>
    var numerator, denominator;
</script>

</body>
</html>

Sometimes, to make your code easier to read, you can put each variable on its own line. Here are examples:

var firstName,
middleName,
lastName;

You can initialize each variable by assigning the desired value to it. Here are examples:

var firstName = "William", middleName = "Jefferson", lastName = "Clinton";

At any time, to change the value of a variable, assign the (new) desired value to it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

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

<script>
    var numerator, denominator = 1;
    
    denominator = 136;
</script>

</body>
</html>

Hoisting

Hoisting is the ability to access a variable before it has been declared. JavaScript and therefore AngularJS support hoisting. To avoid the errors of confusions that could be caused by hoisting, you are encouraged to work in strict mode, which is done by starting the code with a use strict statement. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

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

<script>
    'use strict';
    
    . . .
    
</script>

</body>
</html>

AngularJS Code Comments

Remember that AngularJS is primarily a JavaScript library. Therefore, if you need to add comments in your AngularJS code, follow the same way they are created in JavaScript. Based on this, to create a comment on one line, start with // and type anything you want. To create a comment on one or more lines, start with /* and end with */.

Variables and AngularJS Declaratives

Introduction

You can declare one or more variables in the {{}} placeholder. To do this, provide a name for the variable and assign the desired value to it. An example would be {{price=144.95}}. If you declare a variable in a {{}} placeholder, when the webpage displays, the placeholder would show the value of the variable. You can declare various variables, each in its own {{}} placeholder. After declaring them, you can access the variables in another placeholder. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<style>
.whole-page {
    margin: auto;
    width:  400px;
}
</style>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<div class="whole-page">
    <h1>President</h1>
    
    <table>
        <tr>
            <td style="font-weight: 600">First Name:</td>
            <td>{{firstName='Julius'}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Last Name:</td>
            <td>{{lastName = 'Nyerere'}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Full Name:</td>
            <td>{{firstName}} {{lastName}}</td>
        </tr>
    </table>
</div>
</div>
</body>
</html>

Data Initialization

When applying the ng-app directive to an HTML tag, you can also declare a variable there. To support this, AngularJS provides a directive named ng-init. To use it, add it to the tag and assign the declarations to it. To use the variables in the webpage, in the desired {{}} placeholder, access the variable(s) by its(their) name(s). Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<style>
.whole-page {
    margin: auto;
    width:  400px;
}
</style>
<script src="angular.js"></script>
</head>
<body ng-app ng-init="firstName='Julius'; lastName = 'Nyerere'">
<div class="whole-page">
    <h1>President</h1>
    
    <table>
        <tr>
            <td style="font-weight: 600">First Name:</td>
            <td>{{firstName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Last Name:</td>
            <td>{{lastName}}</td>
        </tr>
        <tr>
            <td style="font-weight: 600">Full Name:</td>
            <td>{{firstName}} {{lastName}}</td>
        </tr>
    </table>
</div>
</div>
</body>
</html>

JavaScript Compiles its Interpreted Language

Introduction

A typical computer language (like C#, C++, Visual Basic, F#, Pascal, etc) uses an internal application called a compiler that analyses all the code submitted to it. If everything is alright, the compiler gathers everything and converts it to a complicated language, called the machine language, that the computer can understand.

Higher level languages like JavaScript (also HTML) also use an internal application but called an interpreter. The interpreter primarily works like a compiler. An interpreter analyzes the code to check it for accuracy. The webpage interpreter reads the code from top to bottom. It reads the HTML tags and creates an ordered list to establish how the HTML appear. It adds the CSS formats to each tag to specify how the tag should appear. Then the interpreter starts reading the JavaScript code. It ignores the comments and empty spaces to consider only the code sections that will influence both the HTML tags and their CSS formats. On the valid JavaScript code, the interpreter checks for errors or things it doesn't understand. If everything is alright, the interpreter submits its findings to the browser to display the results to the visitor.

Minification

We have learned that, when writing your code in JavaScript and/or one of its libraries, to make your code easier to read, you should include empty spaces and comments. Here are examples:

// Identify the employee by name.
var firstName = "James",
    lastName  = "Caulson";
// Specify the hourly salary
var hourlySalary = 22.3;
// Specify the time worked
var timeWorked = 38.5;
// Create full name
var fullName = firstName + ' ' + lastName;
// Calculate the net pay
var netPay = hourlySalary * timeWorked;

Minification is the technique used by the JavaScript interpreter to optimize your code. Among the operations the interpreter performs, it removes the comments and empty spaces that don't matter for the functionality of your code. From the above code, it may come up with code as follows:

var firstName="James",lastName="Caulson";
var hourlySalary=22.3,timeWorked=38.5;
var fullName=firstName+' '+lastName;
var netPay=hourlySalary*timeWorked;

The interpreter performs many other operations such as renaming variables and reducing the amount of code necessary to get the job done.

Minified Versions of Files

AngularJS is provided in various files and sometimes, the same file is available in various versions, one regular and one minified versions. The minified version contains .min in its name. AngularJS comes in a file named angular.js. The minified version is named angular.min.js.

An AngularJS Compiler

To interpret the code submitted to it, AngularJS uses its own internal compiler. As mentioned for JavaScript, the AngularJS compiler analyzes the HTML tags in which the AngularJS directives and expressions are used, including the CSS formats that must be applied, and the other JavaScript (and AngularJS) parts it must work with. As opposed to creating an executable like traditional compilers do, the AngularJS compiler creates the formal HTML code, called template, that must be submitted to the browser to display to the visitor.


Previous	Copyright © 2001-2022, FunctionX	Next