ANGULAR JS SUMMARY
Copyright © 2018 Damian Ndunda Originally by Andrew Grant
Any source code or other supplementary material referenced by the Andrew Grant in this text is available to readers at www.apress.com . For detailed information about how to locate the book’s source code, go to www.apress.com/source-code/.
TABLE OF CONTENTS
Chapter 1 JavaScript You Need to Know
Chapter 2 The Basics of AngularJS
It isn’t uncommon to hear people refer to the AngularJS framework as simply Angular.
JavaScript Primer
Including Scripts on a Page
Listing 1-1. Referencing an External
Script
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<!-- reference the myScript.js script file -->
<script src="scripts/myScript.js"></script>
</body>
</html>
In this case, the file is called
myScript.js, and it resides in a directory named scripts. You can also write
your
script directly in the HTML file itself. Listing 1-2 demonstrates this
technique.
Listing 1-2. Using an Inline Script
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<!-- an inline script -->
<script>console.log("Hello");</script>
</body>
</html>
the browser output would be
as follows:
Hello
Statements
A JavaScript application is essentially a collection of expressions and statements.
Listing 1-3. Statement Execution
<!DOCTYPE html>
<html>
<head >
<title>JavaScript Primer</title>
<script>
console.log("I am a statement");
console.log("I am also a statement");
</script>
</head>
<body>
<script>
console.log("Here is another statement");
console.log("Here is the last statement");
</script>
</body>
</html>
I will be using the handy console.log()
approach quite extensively in this chapter, to
display the program output.
I am a statement
I am also a statement
Here is another statement
Here is the last statement
The easiest way to avoid any confusion
or code mistakes is simply to use semicolons as though they are
required.
Take a look at Listing 1-4. Neither of
the two statements terminates in a semicolon. This is perfectly legitimate
from a syntactic perspective.
Listing 1-4. No Semicolons—All Good
...
<script>
console.log("Here is a statement")
console.log("Here is the last statement")
</script>
...
Listing 1-5. Both Statements on the Same
Line—NOT Good
<script>
console.log("Here is a statement") console.log("Here is the last statement");
</script>
Listing 1-5 is a totally different
story. Here we have two statements on the same line. This is not legitimate
JavaScript, and problems will occur when you run it. More specifically, you will
get a SyntaxError: Unexpected
identifier error message in most web browsers.
Listing 1-6 shows how you can restore
order and overcome the problem in Listing 1-5. As both statements are on
the same line, a semicolon makes it clear where one starts and the other ends.
Listing 1-6. Both Statements on the Same Line—All Good
<script>
console.log("Here is a statement"); console.log("Here is the last statement");
</script>
Listing 1-7. Using Comments
<!DOCTYPE html>
<html>
<head >
<title>JavaScript Primer</title>
<script>
// The lines in this script block execute first
console.log("I am a statement");
console.log("I am also a statement");
</script>
</head>
<body>
<script>
/*The lines in this script block execute
after the lines in the script block above*/
console.log("Here is another statement");
console.log("Here is the last statement");
</script>
</body>
</html>
Listing 1-7 is functionally identical to
Listing 1-3, but this version uses comments within each script block. The
first uses single-line comments, which are useful for short comments that need
not span multiple lines. The second
uses the multiline approach.
Functions
A function is a block of JavaScript code that is defined once but may be executed, or invoked, any number of times.
Listing 1-8. A Simple Function
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
<script>
function mySimpleFunction() {
console.log("Hello");
}
mySimpleFunction();
mySimpleFunction();
</script>
</head>
<body>
</body>
</html>
With the function now in place, we want
to make use of it. Using a function is as simple as typing the
function name, followed by parentheses, a process known as invoking, or calling,
the function.
Hello
Hello
Parameters and Return Values
Let’s look at a function that uses
parameters and can return a value. We will name it tripler, because it can
triple any
number with which it is provided. Our tripler function will define a single
parameter, a number, and return a value
equal to this number multiplied by three (see Listing 1-9).
Listing 1-9. A Function with Arguments
and a Return Value
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
<script>
function tripler(numberToTriple) {
return 3 * numberToTriple;
}
console.log(tripler(150));
console.log(tripler(300));
</script>
</head>
<body>
</body>
</html>
Listing 1-9 shows the tripler function in action. First, we define the function.
Still keeping things simple, within
the function body (the code between the opening and closing curly braces), we
immediately return the result of the
computed value back to the caller. In this case, there are two callers: one that
passes in a value of 150 and another that
passes in a value of 300.
The return statement is crucial here. It takes care of exiting the function and
passing the computed value back
to the caller. Equally important is the numberToTriple parameter, as it contains
the value that we are interested in
tripling.
450
900
I just used the term argument with regard to the value passed into our function.
Types and Variables
Variables are the containers that hold
the data with which your application works. Essentially, they are named areas
of computer memory in which you can store and retrieve values with which you are
working.
Listing 1-10. Declaring Multiple
Variables at Once
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var color = "red";
console.log("The color is " + color);
</script>
</body>
</html>
The color is red
Listing 1-11 provides another example.
This time we declare three variables at once and then assign values to
each of them afterward.
Listing 1-11. Declaring Multiple Variables at Once
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
// declare some variables
var color, size, shape;
// assign values to them
color = 'blue';
size = 'large';
shape = 'circular';
console.log("Your widget is the color " + color + " and its size is " + size +
". It is " +
shape + " in shape.");
</script>
</body>
</html>
It is common to see multiple variables
declared all on the one line, as I have done in Listing 1-11, but you will also
see this done with each variable on its own line, as the following code snippet
shows:
// declare some variables
var color,
size,
shape;
I prefer the first approach, but this is generally just a matter of taste.
Listing 1-11 produces the output following.
Your widget is the color blue and its size is large. It is circular in shape.
Primitive Types
These types are known as primitive
types, as they are the
fundamental built-in types that are readily available. Objects, which I discuss
in the next section, are generally
composed of these primitive types
Booleans
A Boolean value is intended to represent just two possible states: true and
false. Here is an example:
var isLoggedIn = true;
var isMember = false;
Note that, in both cases, we do not put
quotation marks around the values, that is, true and false are not the same
as “true” and “false”. The latter are string types, not Boolean types.
Interestingly, if you do happen to
assign the string “false” to a variable, in Boolean terms, that variable’s value
will be true. Consider the following examples:
isMember = "false";
isMember = 1;
isMember = "Hello";
Each of these variables has an inherent Boolean value, that is, a quality that
leads us to categorize them as truthy.
That is to say, each of these values represent true. Conversely, each of the
following is falsy.
isMember = "";
isMember = 0;
isMember = -0;
Strings
A string stores a series of characters,
such as “Hello JavaScript.” You have two choices when creating strings: you can
use single quotation marks or double quotation marks. Both of the variables
below are string types.
var firstName = "Jane"; // enclosed by double quotation marks
var lastName = 'Doe'; // enclosed by single quotation marks
It doesn’t really matter which variation
you use, but consistency is good practice. One nice thing about this
flexibility is that you can use one within the other.
// a single quotation mark inside a double quoted string
var opinion = "It's alright";
This works both ways, as the following example demonstrates:
// double quotation marks inside a single quoted string var sentence = 'Billy
said,
"How are you today?", and smiled.';
You can also use the handy backslash to achieve the same thing, regardless of
which way you create your strings.
// using the backslash to escape single and double quotes
var sentence = "Billy said, \"How are you today?\", and smiled.";
var opinion = 'It\'s alright';
In case it is unclear why we have to handle strings in this way, consider the
issue with the string following:
var bigProblem = "Billy said, "How are you today?", and smiled.";
console.log(bigProblem);
This produces the very unpleasant output that follows. As far as JavaScript is
concerned, you declared a variable
containing the string "Billy said," and then proceeded to type invalid
JavaScript code!
What you should not do is to use single
and double quotation marks interchangeably, as I do in the following
example:
// This is a bad idea!
var badIdea = "This will not end well';
Here, I start the string with double quotation marks and end it with single
quotation marks—a very bad idea
indeed, because this will cause a syntax error.
Numbers
The number type is used to represent numbers in JavaScript, both integers and floating-point numbers.
Listing 1-12. Numbers in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title> </head>
<body>
<script>
var val1 = 22;
var val2 = 23;
console.log(val1 + val2);
var val3= 22.5;
var val4 = 23.5;
console.log(val3 + val4);
var val5= 50;
var val6 = .6;
console.log(val5 + val6);
// watch out!
var val7= 25;
var val8 = "25";
console.log(val7 + val8);
</script>
</body>
</html>
Looking at the output below, you can see that JavaScript is mostly doing just
what you would expect; however,
you will see something that may appear unusual on the last line of output.
45
46
50.6
2525
the variable val8 was actually
declared as a string. JavaScript
inferred what you intended, and it coerced val7 into type string also
Undefined and Null
JavaScript has two subtly different
types to represent the idea of missing values: undefined and null.
var myName;
console.log(myName);
Here we have a variable called myName to which we have assigned no value. When
we print the value of this
variable to the console, we get the following result:
undefined
JavaScript uses undefined to represent a variable that has been declared but has
not yet been assigned a value.
This is subtly different from the following situation:
var myName = null;
console.log(myName)
In this case, I specifically assigned the value of null. Consequently, the
output is as follows:
null
undefined is a type (undefined),
while null is an object.
you should favor using null whenever you
have to declare a variable to which you are not ready to assign a
value
JavaScript Operators
Table 1-1. Commonly Used JavaScript
Operators
Operator Description
++, -- Pre- or post-increment and decrement
+, -, *, /, % Addition, subtraction, multiplication, division, remainder
<, <=, >, >= Less than, less than or equal to, more than, more than or equal to
==, != Equality and inequality tests
===, !== Identity and nonidentity tests
&&, || Logical AND and OR (|| is used to coalesce null values)
= Assignment
+ String concatenation
.
JavaScript Operators
JavaScript supports all of the standard operators that you would expect to find
in a programming language. Table 1-1
lists some of the more commonly used operators.
Table 1-1. Commonly Used JavaScript Operators
Operator Description
++, -- Pre- or post-increment and decrement
+, -, *, /, % Addition, subtraction, multiplication, division, remainder
<, <=, >, >= Less than, less than or equal to, more than, more than or equal to
==, != Equality and inequality tests
===, !== Identity and nonidentity tests
&&, || Logical AND and OR (|| is used to coalesce null values)
= Assignment
+ String concatenation
ChApter 1 ■ JAvASCrIpt You Need to KNow
12
Some of these operators may make intuitive sense, others perhaps not. Let’s
write a simple program to look at
how they behave. There are a couple of cases in which we will look a bit closer
at some of these operators, so I will
omit them in Listing 1-13 and deal with them shortly afterward.
Listing 1-13. Common Operators in Action
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
console.log("Doing assignment");
var myName = "Catie";
console.log(myName);
console.log("Doing arithmetic");
console.log(5 + 5); // 10
console.log(5 - 5); // 0
console.log(5 * 5); // 25
console.log(5 / 5); // 1
console.log(5 % 5); // 0
console.log(11 % 10); // 1
console.log("Doing comparisons");
console.log(11 > 10); // true
console.log(11 < 10); // false
console.log(10 >= 10); // true
console.log(11 <= 10); // false
console.log("Doing string concatenation");
console.log(myName + " Grant"); // "Catie Grant"
console.log("Doing boolean logic");
console.log(true && true); // true
console.log(true && false); // false
console.log(true || true); // true
console.log(true || false); // true
</script>
</body>
</html>
Equality vs. Identity
The identity (===) and equality
(==) operators are one such special case. These operators look similar, and they
can even appear to behave similarly,
but, in fact, they are significantly different.
When performing comparisons, the equality operator (==) will attempt to make the
data types the same before
proceeding. On the other hand, the identity operator (===) requires both data
types to be the same, as a prerequisite.
Listing 1-14. Converting Types and Then
Comparing
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var valueOne = 3;
var valueTwo = "3";
if (valueOne == valueTwo) {
console.log("ValueOne and ValueTwo are the same");
} else {
console.log("ValueOne and ValueTwo are NOT the same");
}
</script>
</body>
</html>
ValueOne and ValueTwo are the same
The reason why the == operator reasons
that "3" and 3 are the same is because it actually coverts the operands
(the values either side of the == operator) to the same type before it does the
comparison. However, if we change the
operator to an identity operator, as shown here, we see quite different output:
if (valueOne === valueTwo)
ValueOne and ValueTwo are NOT the same
// Will this produce the number 2 or the string "11"?
console.log("1" + 1);
The output is:
11
From this, we can deduce that JavaScript
must have converted the number value to a string value and performed
a concatenation operation, as opposed to an addition operation.
At times, as you might imagine, we want some control over types. Fortunately,
JavaScript comes with the right
tools. Table 1-2 shows just a few of the tools you have at your disposal.
Table 1-2. A Few Built-in Type-Related Utilities
Function / Operator Description
typeof Allows you to ask the data type of its operand. It can provide the
following values:
"number"
"string"
"boolean"
"object"
"undefined"
null
parseInt The parseInt() function parses a string and returns a number. If it
cannot return a number,
it will return NaN (Not a Number).
toString Converts a value, such as a number, to a string
isNaN The isNaN function can tell you if a given value is not a number. For
example,
isNaN('three') will return true; isNaN(3) will return false.
Listing 1-15. Type Conversion Examples
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
// create a string variable
var myStringType = "22";
// use the handy typeof operator to
// confirm the type is indeed string
console.log(typeof myStringType );
// create a number variable
var myNumberType = 45;
// use the handy typeof operator to
// confirm the type is indeed number
console.log(typeof myNumberType );
// Now let's convert myStringType to
// a number type using the parseInt()
// method
var myStringType = parseInt(myStringType);
// confirm the type is indeed number
console.log(typeof myStringType );
// finally, let's convert the myNumberType
// to a string
var myNumberType = myNumberType.toString();
// confirm the type is indeed string
console.log(typeof myNumberType );
</script>
</body>
</html>
Pre- vs. Post-Increment
the pre- and post-increment operators
(++) and their
decrement (--) counterparts.
myNumber = myNumber + 1;
myNumber += myNumber;
Another way that you can achieve the same result as the preceding two techniques
is as follows:
myNumber = ++myNumber;
A post-increment, as you might
expect, would look like this:
myNumber = myNumber++;
Listing 1-16. Pre- vs. Post-Increment
Behavior
<!DOCTYPE html>
<html>
<head >
<title>JavaScript Primer</title>
</head>
<body>
<script>
// Pre-increment
var myNumber = 1;
myNumber = myNumber + 1;
myNumber = ++myNumber;
console.log("Pre-increment result is " + myNumber);
// Post-increment
var myOtherNumber = 1;
myOtherNumber = myOtherNumber + 1;
myOtherNumber = myOtherNumber++;
console.log("Post increment result is " + myOtherNumber);
</script>
</body>
</html>
Read through Listing 1-15, and see if you can figure out why the output is as
shown following. The answer lies in
the nature of how or, rather, when these operators perform their work.
Pre-increment result is 3
Post-increment result is 2
the post increment operation
happens after the assignment operation.
myNumber = ++myNumber;
Reading the preceding code snippet in plain English, you might say this:
“Increment the current value of
myNumber, and then store it into the variable myNumber.
Working with Objects
Creating Objects
Listing 1-17. Creating Objects
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
// Example 1
var myFirstObject = {};
myFirstObject.firstName = "Andrew";
myFirstObject.lastName = "Grant";
console.log(myFirstObject.firstName);
// Example 2
var mySecondObject = {
firstName: "Andrew",
lastName: "Grant"
};
console.log(mySecondObject.firstName);
// Example 3
var myThirdObject = new Object();
myThirdObject.firstName = "Andrew";
myThirdObject.lastName = "Grant";
console.log(myThirdObject.firstName);
</script>
</body>
</html>
Examples 1, 2, and 3 all do the
same thing: they create an object, add a couple of properties to it, and
assign some values to those properties. Each example logs to the console to
produce the following output:
Andrew
Andrew
Andrew
Reading and Modifying an Object’s Properties
Listing 1-18. Accessing and Changing
Object Values
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myFirstObject = {};
myFirstObject.firstName = "Andrew";
console.log(myFirstObject.firstName);
myFirstObject.firstName = "Monica";
console.log(myFirstObject.firstName);
myFirstObject["firstName"] = "Catie";
console.log(myFirstObject["firstName"]);
</script>
</body>
</html>
As the following output demonstrates, we
start off by setting a value of Andrew on the firstName property; shortly
thereafter, we change that value to Monica. On both occasions, we use dot
syntax, that is, the object name, followed
by a dot and then the property name. Shortly afterward, we change it yet again,
but this time, we use associative array
syntax. This syntax requires us to use the object name and then to specify the
property name within brackets.
Andrew
Monica
Catie
Which approach you use can often be a matter of preference, but associative
array syntax has some nifty benefits.
For example, you can use a variable name inside the brackets, which makes for
some very handy dynamic behavior.
Listing 1-19 provides a quick example of this.
Listing 1-19. Associative Array
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myFirstObject = {};
myFirstObject["firstName"] = "Catie";
console.log(myFirstObject["firstName"]);
// Here we use a variable to determine which
// property we are accessing
var propertyName = "firstName";
myFirstObject[propertyName] = "Christopher";
console.log(myFirstObject["firstName"]);
</script>
</body>
</html>
The important part of Listing 1-18 is where we update the firstName property
using the previously declared
propertyName variable. Using dot syntax, you cannot do this. The output is as
follows:
Catie
Christopher
Note ■ Be careful when using associative
array syntax. If you make a typo and write, say, ["firstNme"] instead of
["firstName"], you will actually create on the object a new property called
firstNme.
Adding Methods to Objects
Listing 1-20. An Object with a Method
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myCleverObject = {
firstName: "Andrew",
age: 21,
myInfo: function () {
console.log("My name is " + this.firstName + ". ");
console.log("My age is " + this.age + ".");
}
};
myCleverObject.myInfo();
</script>
</body>
</html>
The last line
shows it being called through the object reference.
A function attached to an object in this manner is known as a method. Why is
that? The short and simple answer
is that, in reality, they are subtly different things, both in how JavaScript
treats them and how you, as a developer, are
supposed to use them.
My name is Andrew.
My age is 21.
I want to make a minor change to the
preceding listing. Here is a snippet of the affected area, the myInfo method:
myInfo: function () {
console.log("My name is " + firstName + ". ");
console.log("My age is " + age + ".");
}
Everything is identical, except for the
fact that I removed the this keyword from firstName and age. This is an
example of what not to do. As the following output shows, my browser didn’t like
it one bit.
Uncaught ReferenceError: firstName is not defined
The moral of the story is this (no pun intended): make sure that you access the
current object’s properties via the
this keyword, if you want to avoid unpredictable results.
Enumerating Properties
Listing 1-21. The for in Loop
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myObject = {
firstname: "Andrew",
surname:"Grant",
age: 21
};
for (var prop in myObject) {
console.log(myObject[prop]);
}
</script>
</body>
</html>
Listing 1-21 uses a for in loop to print each property of myObject to the console.
All we do here is use the variable prop,
which changes with
each pass through the loop, to print the property’s value to the console.
Andrew
Grant
21
Control Flow
Looping is the ability to repeat the
execution of a block of code a number of times; whereas
branching is the ability to jump to one block of code or potentially some other
block of code
Loops
Arguably the most common loop structure
in JavaScript is the for loop. The for loop can
seem complicated at first, but it’s not difficult to use, once you understand
what it is composed of.
There are four key parts to a for loop:
1. Counter variable. This is something that is created and usually used only in
the for loop.
Its main task is to keep count of how many times the loop has been entered.
2. Conditional logic. This is where the decision is made on whether or not the
for loop
should continue.
3. Counter variable. This is usually incremented, or otherwise altered, after
every loop.
4. Code block. This is the actual block of code that is executed at each pass
through the loop.
Listing 1-22. The for Loop in Action
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
console.log("Looping started");
// set up the for loop here
for (i = 0; i < 5; i++) {
console.log("The current value of i is " + i + ". We will loop again because " +
i + "
is less than 5");
}
console.log("Looping finished");
</script>
</body>
</html>
i (which is the counter) starts off at
0, so i < 5
evaluates to true. Only when i < 5 evaluates to false will the loop end and
continue on to the next line of code, in
this case, the code that prints Looping finished to the console.
Looping started
The current value of i is 0. We will loop again because 0 is less than 5
The current value of i is 1. We will loop again because 1 is less than 5
The current value of i is 2. We will loop again because 2 is less than 5
The current value of i is 3. We will loop again because 3 is less than 5
The current value of i is 4. We will loop again because 4 is less than 5
Looping finished
The while loop is a somewhat simpler
version of the for loop. It doesn’t require as much setup, but it isn’t quite
as powerful (at least not without extra work). The basic structure of a while
loop looks like this:
while( some value is true){
execture this block of code
}
Listing 1-23. The while Loop in Action
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var i = 0;
while (i < 10) {
console.log("The value of i is " + i);
i++;
}
</script>
</body>
</html>
Conditional Statements
Conditional statements allow you to
implement “fork in the road” logic. That is, JavaScript can execute a statement,
or
statements, if a specified condition is true. You can also execute a statement,
or statements, if this condition is false.
Listing 1-24. JavaScripts if/else in
Action
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var userIsLoggedIn = false;
if(userIsLoggedIn){
console.log("Welcome back - sending you to some very private data");
}else{
console.log("Sorry - access denied");
}
</script>
</body>
</html>
It will only execute the code in
the associated code block if it finds a value of true. Should it find a value of
false, it will execute the block of code within the else statement.
Sorry - access denied
Listing 1-25. Nested Conditional Logic
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var userIsLoggedIn = false;
var userIsVIP = true;
if(userIsLoggedIn){
console.log("Welcome back - showing you some very private data");
if(userIsVIP){
console.log("You are entitled to a 25% discount!");
}else{
console.log("You are entitled to a 10% discount!");
}
}
</script>
</body>
</html>
Welcome back - showing you to some very
private data
You are entitled to a 25% discount!
Working with Arrays
JavaScript arrays are used to store multiple values in a single variable.
Listing 1-26. Working with Arrays
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myArray = [];
myArray[0] = "Andrew";
myArray[1] = "Monica";
myArray[2] = "Catie";
myArray[3] = "Jenna";
myArray[4] = "Christopher";
console.log("Item at index 0: " + myArray[0]);
console.log("Item at index 1: " + myArray[1]);
console.log("Item at index 2: " + myArray[2]);
console.log("Item at index 3: " + myArray[3]);
console.log("Item at index 4: " + myArray[4]);
</script>
</body>
</html>
Item at index 0: Andrew
Item at index 1: Monica
Item at index 2: Catie
Item at index 3: Jenna
Item at index 4: Christopher
JavaScript provides the Array.length property, so that you have something with which to work.
Listing 1-27. Using the Length Property
...
var myArray = [];
myArray[myArray.length] = "Andrew";
myArray[myArray.length] = "Monica";
myArray[myArray.length] = "Catie";
myArray[myArray.length] = "Jenna";
myArray[myArray.length] = "Christopher";
// Display the first item
console.log("The first item is: " + myArray[0]);
// Dislay the last item
console.log("The last item is: " + myArray[myArray.length - 1]);
...
Listing 1-27 is similar to Listing 1-26, but instead of hard-coding the index
values, we use the length property to
calculate the current position. Note the need to cater to the zero-based nature
of arrays. Accessing the last item in the
array requires us to subtract 1 from the length property.
The first item is: Andrew
The last item is: Christopher
Array Literals
Instead of doing this:
var myArray = [];
myArray[0] = "Andrew";
myArray[1] = "Monica";
myArray[2] = "Catie";
myArray[3] = "Jenna";
myArray[4] = "Christopher";
you can achieve the same result doing this:
var myArray = ["Andrew","Monica","Catie","Jenna","Christopher"];
Enumerating and Modifying Array Values
Listing 1-28. Enumerating an Array
var myArray = ["Andrew","Monica","Catie","Jenna","Christopher"];
for(var i = 0; i < myArray.length; i++) {
console.log(myArray[i]);
}
The output of Listing 1-28 follows:
Andrew
Monica
Catie
Jenna
Christopher
Listing 1-29 shows how we can update the
entire array by adding the family
surname to each item.
Listing 1-29. Modifying Array Values
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myArray = ["Andrew","Monica","Catie","Jenna","Christopher"];
console.log("Before: ", myArray);
for(var i = 0; i < myArray.length; i++) {
myArray[i] = myArray[i] + " Grant";
}
console.log("After: ", myArray);
</script>
</body>
</html>
The most important part of this listing is myArray[i] = myArray[i] + " Grant";
Passing the array to console.log() is a
handy way
to dump the contents of the entire array for inspection. The output is as
follows:
Before: ["Andrew", "Monica", "Catie", "Jenna", "Christopher"]
After: ["Andrew Grant", "Monica Grant", "Catie Grant", "Jenna Grant",
"Christopher Grant"]
Callbacks
functions are objects that can be passed around just like any other value in JavaScript
Listing 1-30 provides an example that
shows how you can create a variable and
then store a function in that variable.
Listing 1-30. Storing a Function Reference in a Variable: Part 1
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var myFunctionReference = function () {
console.log('callbacks part 1')
}
myFunctionReference();
myFunctionReference;
myFunctionReference();
</script>
</body>
</html>
In two cases, I use the parentheses, but
in one case, I do not. In the case in
which I do not, the function reference is not called (or invoked). It is the
parentheses, also known as the call operator,
that cause the function to run. Here are the results:
callbacks part 1
callbacks part 1
Listing 1-31. Storing a Function
Reference in a Variable: Part 2
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
function anotherFunctionReference() {
console.log('callbacks part 2');
}
var x = anotherFunctionReference;
x();
anotherFunctionReference();
x();
anotherFunctionReference();
x();
</script>
</body>
</html>
Listing 1-31 defines a function and stores a reference to that function in two
separate steps. This time around, the
function has a name. We can use both its name and the reference to call it. The
following output confirms this.
callbacks part 2
callbacks part 2
callbacks part 2
callbacks part 2
callbacks part 2
Callbacks are just functions that you pass to some other function, so that they can be called at some later point.
Note ■ Ajax allows web pages to be
updated asynchronously by exchanging small amounts of data with the server
behind the scenes. this makes it possible to update parts of a web page without
reloading the whole page. one of the
ways AngularJS supports this is through its $http service, which we will see
more of in Chapter 7.
Listing 1-32. A Simple Callback in
Action
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Primer</title>
</head>
<body>
<script>
var actionsToTakeWhenServerHasResponded = function () {
console.log('The server just responded!')
}
function communicateWithServer(callback) {
callback();
}
communicateWithServer(actionsToTakeWhenServerHasResponded);
</script>
</body>
</html>
Here we have a variable called actionsToTakeWhenServerHasResponded. This
variable is a function reference.
On the next line down, we have a function called communicateWithServer. The
thing to take note of here is that this
function takes an argument, which we have named callback, which it expects to be
a function reference.
Finally, on the last line, we call the communicateWithServer function and pass
it the
actionsToTakeWhenServerHasResponded variable. I hope that you can see that
inside our communicateWithServer
function, our actionsToTakeWhenServerHasResponded function is executed through
the callback reference. See the
following results:
The server just responded!
For the most part, this example
represents the nature of callbacks. One thing it doesn’t do very well is
demonstrate time passing as the communicateWithServer does some presumably
lengthy task. This is really the point
of callbacks—your program can continue to execute as opposed to sitting idle
waiting for some lengthy process to
finish. Here is a code snippet that shows how this might look in action:
console.log('1')
$http.post('/ http://someurl.com/someService ', data).success(function () {
console.log('2')
});
console.log('3')
1
3
2
The key thing to observe here is that 3
comes before 2 in the output. This is because the callback function, which
contains the console.log('2') statement, takes place at some point in the
future.
JSON
JavaScript Object Notation, or JSON, is
a lightweight data-interchange format. Essentially, it is way of representing
data in a way that is much more compact than XML yet still relatively human and
totally machine-readable.
Unlike XML, it is
considerably faster over the wire.
Listing 1-33. Sample JSON Data
{
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
}
This is essentially a JavaScript
object with a
bunch of properties representing contact data for a John Smith. firstName and
lastName have simple string values.
The address property is itself represented as an object, and the phoneNumbers
property is an array.
The same thing in XML is considerably
more verbose, relatively difficult to manipulate in JavaScript, and more
memory- and storage-intensive. Listing 1-34 shows the JSON from Listing 1-33
represented as XML.
Listing 1-34. The JSON from Listing 1-32
Represented as XML
<?xml version="1.0" encoding="UTF-8" ?>
<contact>
<firstName>John</firstName>
<lastName>Smith</lastName>
<address>
<streetAddress>21 2nd Street</streetAddress>
<city>New York</city>
<state>NY</state>
<postalCode>10021</postalCode>
</address>
<phoneNumbers>
<phoneNumber>212 555-1234</phoneNumber>
<phoneNumber>646 555-4567</phoneNumber>
</phoneNumbers>
</contact>
It’s important to keep in mind that JSON
is an alternative to XML, not a replacement. XML has its advantages
too: it is more self-descriptive and arguably more human-readable than JSON.
you will very likely come across JSON
much more often, as it is heavily used in many common
scenarios, such as communicating with back-end servers.
Summary
We looked at core language features, such as statements, functions, arrays, and objects.
Chapter 2
The Basics of AngularJS
The dictionary definition tells us that a framework is “an essential supporting structure.”
AngularJS is a large and helpful community, an
ecosystem in
which you can find new tools and utilities, an ingenious way of solving common
problems, and, for many, a new and
refreshing way of thinking about application structure and design.
Java programmers use the LibGDX
framework to help them create games.
Downloading and Installing AngularJS
1. Create a folder on your computer called
BeginningAngularJS. Inside this folder, create a
subfolder called js to contain your JavaScript files.
2. On the AngularJS home page, click the Download button. You will see a dialog
box like the
one shown in Figure 2-1.
3. You want the 1.2.x-minified version, so make
sure that you choose 1.2.x (legacy) for the
branch option and Minified for the build option.
4. Click the Download button to start the download process.
5. Once the download has completed, move the downloaded file, angular.min.js,
into the js
folder that you created earlier (assuming you did not save it there directly).
6. That’s it! You just downloaded and installed AngularJS.
Content Delivery Network (CDN
Content Delivery networks are a great place to
host Javascript libraries, such as angularJs. they provide
speed and performance benefits, and they can be much more bandwidth-friendly.
google, Microsoft, Yahoo, and other
large web organizations offer CDn services for free.
if you have questions. Of particular
interest are the case studies that you can use to get
a sense of AngularJS in action (see
http://builtwith.angularjs.org)
First AngularJS Application
Save Listing 2-1 into your BeginningAngularJS
folder.
Listing 2-1. Hello World
<!DOCTYPE html>
<html ng-app>
<head>
<title>Listing 2-1</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p>Hello {{'Wor' + 'ld'}}</p>
</body>
</html>
We use ngApp to let AngularJS know which
element is to be considered the root of the application. As we
have declared it within the HTML element, we are declaring that the whole
document is to be “under the control”
of AngularJS.
When we place an expression between double curly
braces like this, we create an expression binding. In a
nutshell, this means that the value of the expression is bound. Anytime it
changes, the binding will update too.
let’s
summarize the key steps we took in Listing 2-1.
We used the • ngApp directive to inform our page that it should consider itself
under the control
of AngularJS.
We then used a script element to include the AngularJS library.•
Just to prove everything was hooked up correctly, we used a simple AngularJS
expression •
binding to do some basic string concatenation.
Listing 2-2. Tinkering with the Hello World
Listing
<!DOCTYPE html>
<html>
<head>
<title>Listing 2-2</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p ng-app>Hello {{'Wor' + 'ld'}}</p>
<p>Hello {{'Wor' + 'ld'}}</p>
</body>
</html>
All that we have done here is to move the ngApp
directive out of the opening HTML element and place it on the first
paragraph element. We also added another paragraph element, which is almost
identical to the first. However this one
is without an ngApp directive.
The second interesting thing is that the second
paragraph uses an expression too.
However, this expression binding simply renders as is; it is not evaluated at
all. AngularJS
simply isn’t interested in it, because it is not contained within the boundaries
of an ngApp
directive. In fact, AngularJS has no knowledge of this particular paragraph
element or
anything contained within it.
Note ■ it is technically possible, though not
terribly common, to use more than one ngApp directive per page. there are
a couple of limitations, however. first, they must not be nested within each
other. second, you have to write extra code to
make angularJs recognize all but the first one.
Listing 2-3. Live Updates
<!DOCTYPE html>
<html ng-app>
<head>
<title>Listing 2-3</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<label>City: </label><input ng-model="city" type="text" /></label>
<p>You entered: {{city}}</p>
</body>
</html>
the ngModel directive, which we have
assigned the value of city. The second line, via an expression binding, uses
this value to reference the text that the
end user enters into the text field.
Start typing into the text
field and watch as the text in the paragraph below the text field updates in
real time.
AngularJS has
a strong lean toward a declarative, as opposed to a procedural, coding style.
Declarative vs. Procedural Programming
A classic example of a declarative programming language to which many developers can easily relate is SQL.
You don’t worry
about how the database engine should pull the data together in the most
efficient way, and you don’t worry about
things such as control flow and looping constructs
Procedural programming, on the other hand,
requires a more detailed and lower-level set of instructions. In
the extremely procedural C language, for example, you must take great care to
reserve memory, detail the specific
instructions you want to be executed, and then worry about freeing up memory,
making sure your algorithms perform
well and are thoroughly tested,
AngularJS won’t mind at all if you want to adopt
a procedural approach
when it suits you.
Directives and Expressions
What Is a Directive?
AngularJS uses directives to augment HTML with
extra functionality. Essentially, directives are a convenient way to
declaratively call JavaScript functions.
Listing 2-4. A First Look at ngShow
<!DOCTYPE html>
<html ng-app>
<head>
<title>Listing 2-4</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<p ng-show="true">Paragraph 1, can you see me?</p>
<p ng-show="false">Paragraph 2, can you see me?</p>
<p ng-show="1 == 1">Paragraph 3, can you see me?</p>
<p ng-show="1 == 2">Paragraph 4, can you see me?</p>
</body>
</html>
Listing 2-4 shows four paragraph elements, each has been “augmented” by an
AngularJS directive that goes by
the name of ngShow.
Note ■ the astute reader may have noticed that i
have used the term ngShow in my writing and the subtly
different term ng-show in my code. Which is correct? angularJs typically refers
to directives in documentation by
their case-sensitive, CamelCase name (for example, ngShow) but refers to
directives in the DoM by using lowercase,
dash-delimited attributes (for example, ng-show).
The ngShow directive will show, or hide, the
element
on which it is declared, based on the expression provided to it. Load up Listing
2-4 in your browser, and you will see
that only the first and third paragraphs appear (as confirmed in Figure 2-3).
They only appear because, in both cases,
their respective expressions evaluate to the Boolean value of true. The second
and fourth paragraphs, however, do not
appear because their respective ngShow expressions evaluate to the Boolean value
of false.
The ngShow directive is very handy. You will use
it often for hiding or showing regions of your user interface,
based on user input or other conditions.
Another common directive is the ngClick directive. Just like ngShow, ngClick
expects an expression, but unlike
ngShow, this expression is only evaluated when the element it is declared upon
is clicked.
Listing 2-5 shows ngClick in action. Load it up in your browser and press the
Increment button a few times.
Listing 2-5. Demonstrating ngClick
<!doctype html>
<html ng-app>
<head>
<title>Listing 2-5</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<button ng-click="count = count + 1" ng-init="count = 0">
Increment
</button>
count: {{count}}
</body>
</html>
As you might have guessed, clicking the Increment
button causes the value of count to increment. Each time the
button is clicked, ngClick evaluates the expression.
MVC (Model View Controller)
ngInit here we use it to initialize the count
variable to 0. You could just as easily have set this value to,
say, 10, in order to increment from a starting value of 10 instead of 0
What Are Expressions?
In AngularJS, expressions are not evaluated
against the global window object; instead, they are •
evaluated against a scope object.
You don’t get the usual • ReferenceError or TypeError when trying to evaluate
undefined
properties. AngularJS expressions are forgiving in that regard.
You cannot use conditionals, loops, or exceptions. This is a good thing; you
don’t want •
complex logic inside expressions. (In Chapter 3, I will discuss where you do
want them.)
You can use AngularJS filters to format data before displaying it. (I cover
Filters in Chapter 4.)•
To get a sense of how expressions work and what you can do with them, take a
look at Listing 2-6.
Listing 2-6. A Quick Look at AngularJS
Expressions
<!DOCTYPE html>
<html ng-app>
<head>
<title>Listing 2-5</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<h1>Expression Samples</h1>
<!-- Basic arithmetic -->
<p>6 + 4 = {{6 + 4}}</p>
<!-- Using a JavaScript string method -->
<p>{{"Beginning AngularJS".toUpperCase()}}</p>
<!-- Searching for an occurence of 'D' -->
<p>{{"ABCDEFG".indexOf('D')}}</p>
<!-- Ternary operation -->
<p>{{1==1 ? "Red" : "Blue"}}</p>
</body>
</html>
There is nothing complex going on here. It’s all run-of-the-mill JavaScript code
but now using AngularJS
expressions. Figure 2-4 shows the results.
Summary
This chapter explored the concept of frameworks and why you would want to use one
in this chapter, we will look at what it means to
organize and structure an application and how
the Model View Controller (MVC) pattern can help you to do both.
Design Patterns
a design pattern is a
documented solution to a recurring problem that programmers have
identified—usually in a particular context.
Design patterns won’t give you the code you need to solve a given problem, but
they will propose a well-thought-out
and generally accepted approach that you might want to consider adopting
yourself.
Sometimes, you will find a lot more information
about a design pattern than what I present here, but usually you
will find at least this much to help you understand its purpose and its intended
uses.
Table 3-1. Typical Design Pattern Documentation
Title Description
Pattern Name and
Classification
A name that helps in referring to the pattern, often
with a classification stating the type of pattern it is
Intent The goal of the pattern and the reason it exists
Motivation A scenario consisting of a problem and a context in
which this pattern can be used
Collaboration A description of how classes and objects used in the
pattern interact
Sample Code Actual code showing how the pattern can be used in a
programming language
there is a school of thought that says that MVC
is not a design pattern at all, rather it’s an an architectural
pattern.
the unified Modeling Language (uML) is a
general-purpose modeling language used in software development.
It provides a standard way to visualize the design of software systems.
Table 3-2. Singleton Design Pattern Documentation
Title Description
Pattern Name and Classification Singleton: an object creational pattern
Intent Ensures that a class has only one instance and provides a global point
of access to it
Motivation Sometimes it makes sense to control the creation of certain objects.
For example, rather than allow an application to create numerous
database connection objects, it may make more sense to allow for a
single connection object, which an application can access through a
gateway object, that provides access to a single instance.
Collaboration The Singleton collaborates with external objects.
Implementation Creates a class that can create a single instance of itself. This
should be
the only way an instance can be created.
Sample Code Sample code is shown in Listing 3-1.
Listing 3-1. A JavaScript Implementation of the
Singleton Pattern
var Logger = (function() {
// private variable to hold the only
// instance of Logger that will exist
var loggerInstance;
// Create the logger instance
var createLogger = function() {
var _logWarning = function(message) {
// some complex work coud go here, but
// let's just fake it
Listing 3-1. A JavaScript Implementation of the Singleton Pattern
var Logger = (function() {
// private variable to hold the only
// instance of Logger that will exist
var loggerInstance;
// Create the logger instance
var createLogger = function() {
var _logWarning = function(message) {
// some complex work coud go here, but
// let's just fake it
return message.toUpperCase();
};
return {
logWarning: _logWarning
};
};
return {
// Here is the crucial part. First we check
// to see if an instance already exists. If
// it does, we return it. If it does not, we
// create it.
getInstance: function() {
if (!loggerInstance) {
loggerInstance = createLogger();
}
return loggerInstance;
}
};
})();
// Notice how we use getInstance() and we
// do not use direct object creation with the
// new keyword
var myLogger = Logger.getInstance();
myLogger.logWarning("Memory use nearing maximum!");
The essential aspect of Listing 3-1 is that it
privately manages a single instance of a logger object. It isn’t possible
to create a new logger object directly. We have to use the getInstance function
to access the already-existing logger
object (or, if it didn’t exist already, the newly created logger object).
Model View Controller
MVC is often considered an architectural pattern,
which is essentially a pattern that addresses some
aspect of an application’s overall organization and structure.
architectural patterns are often realized through a number of design patterns.
Model
The model represents the underlying, logical
structure of data in a software application. It’s a common mistake to
think of the model as the database behind your application, and it is much
better to view the model as the body of
code that represents the data.
View
A view is the body of code that represents the
user interface (all of the things that the user can see and to which the
user can respond on the screen, such as buttons, dialog boxes, and so on). An
application generally has multiple
views, and each view often represents some portion of your model.
Controller
You can think of the controller as the intermediary for the view and the model.
A Separation of Concerns
the controller is actually keeping the
model and the view separated—one
has no direct knowledge of the other. This is a fairly common design in software
engineering, and the term used to
describe it is decoupling.
When you organize your applications in this
manner, it promotes a principle known as Separation of Concerns.
Software that has been built around this principle tends to have distinct parts,
each of which looks after a particular
concern. MVC is a great way of achieving this Separation of Concerns,
Why MVC Matters
A classic benefit of MVC is that you can, with
relative ease, add a new format to your application. That is, you can
start off with a standard HTML-based set of views and then later add a new set
of views supporting a totally different
format, such as Silverlight or a native mobile front end.
The
view is in no way exclusively tied to the model, so it is far easier to treat it
as a distinct component that we can swap
out for another (or, as is quite common, compliment with another).
There are also benefits with regard to the methodologies and processes you (and
your team) can use. For
example, Test-Driven Development (TDD)
End users benefit from MVC because it leads to
applications that are far less prone to bugs and much easier to
maintain.
Despite the extra up-front effort, it can save
hours and
hours of time later on
MVC the AngularJS Way
The code shown in Listing 3-1 is what we will use
to represent our model.
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant',
'Jennifer Grant'];
The employees variable is simply a hard-coded array of employee names.
The
important thing to understand about this line of code is that the array of
employees is what represents our model.
It’s worth making a clarification here, as there is often confusion around the
term model. Is the model all of the
objects that represent the entities in our data store, or is it just the one
specific piece of information that we use in
a view (employees being an example of the latter)? The short and simple answer
is that it depends on the context,
although it is quite common to refer to the former as the domain model and the
latter as the view model.
it represents the presentation of data from
our model.
Number of Employees: {{ ourEmployees.length}}</h2>
Listing 3-2 is where the really interesting stuff
starts to happen, as the AngularJS MVC framework is starting to
emerge. The function MyFirstCtrl is the controller. It is a common convention in
AngularJS to use Pascal case when
naming the controller function (that is, to start with a capital letter and use
a capital letter for each new word).
Listing 3-2. MVC in Action
function MyFirstCtrl($scope) {
// populate the employees variable with some model data
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant',
'Jennifer
Grant'];
// Now put this model data into the scope so it can be used in the view
$scope.ourEmployees = employees;
}
Review Listing 3-2. We assign the model data to the ourEmployees property that we set on this $scope object.
The $scope object was
supplied to our controller function by the AngularJS framework, and all that we
needed to do was to populate it with
the data that we wanted to make available to the view.
Glance back at the view in Listing 3-2, and
notice that the expression uses a reference to ourEmployees. You can
think of this expression {{ourEmployees.length}} as effectively being the same
thing as {{$scope.ourEmployees.
length}}. Don’t actually use a scope reference in this manner within an
expression; it won’t work, as the use of the
current scope object is implicit.
Listing 3-3. A Complete MVC Example
<!DOCTYPE html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function MyFirstCtrl($scope) {
var employees = ['Catherine Grant', 'Monica Grant',
'Christopher Grant', 'Jennifer Grant'
];
$scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</body>
</html>
The output, as shown in Figure 3-2, is simply a
count of the number of employees, courtesy of the Array.length
property.
It is also a key player in the framework’s
ability to keep the model and the view in sync with each other. The changes made
to the model were immediately
reflected in the view; we did not have to do any Document Object Model (DOM)
manipulation.
Tip ■ If you have been working with jQuery for a
while, you might find the lack of doM manipulation a bit peculiar at
first. jQuery is all about doM manipulation, and you might have to make an
effort to shake off that way of thinking when
you are working with angularJS.
Listing 3-4. Displaying the Employee Names
<!DOCTYPE html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function MyFirstCtrl($scope) {
var employees = ['Catherine Grant', 'Monica Grant',
'Christopher Grant', 'Jennifer Grant'
];
$scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
<p ng-repeat="employee in ourEmployees">{{employee}}</p>
</body>
</html>
we now use the ngRepeat directive to display the
name of each
employee who works for us.
The ngRepeat directive will repeat the instance of the element upon which it is
declared (a paragraph element in
this case) for each item in a collection.
Summary
We then looked at the Model View Controller (MVC)
pattern, the pattern predominantly
used when building AngularJS applications.
A quick look at ngRepeat demonstrated that AngularJS isn’t just helping us with
the higher-level structural
aspects of our applications. The declarative approach taken with directives also
helps us to keep our code clear and
concise.
Home/ Info/ Products/ BIG TECH Metaverse Metaverse Vs. Virtual Reality PC Buyers Guide/ IEEE 802 Standards Social Media Platforms Technology Videos/ Computer & IT Certifications HTML Angular.js Venus Project/ Contact
Certified Enterprise Blockchain Professional (CEBP) Web 3.0 Satoshi Nakamoto Cryptocurrency Ethereum NFT Merkle Tree El-Salvador eNaira
AWS Certification Google Certificates Oracle Certifications cisco certifications Huawei Certification Microsoft Certifications Linux Certification
Google-Cloud-Platform-Guide Amazon-Web-Services-Guide Global-Cloud-Infrastructure-Of-AWS Amazon-Web-Services-Cli-Guide AWS-Cloudformation Devops Microsoft-Azure Oracle-Cloud Digitalocean-Cloud Openstack-Cloud
Active Components Passive Components Test Electrical Components Electronics Classification
Copyright BICT Solutions Privacy Policy. | Terms and Conditions apply | All rights reserved.