AngularJS Tutorial for Absolute Beginners (with Installation Guide)

Introduction to AngularJS: What is AngularJS, Its Benefits, Features, and How to Download and Installation Guide

AngularJS is a programming language that is becoming popular nowadays.

It’s 2018, and the technological advancements have been at their peak this year. The programming languages such as Python, AngularJS, Ruby on Rails, React and Redux JS, etc. have been most sought after. 

You can easily get a job if you get a hold of any of these programming languages along with the older languages such as JAVA or C++. It’s very important to be up to date with the new programming trends in order to keep your learning quotient high.

Our Series of AngularJS Tutorials will give you complete knowledge of the AngularJS.

*******************************************************************************

Quickly Learn AngularJS with these 6 Tutorials:

Tutorial #1 – Introduction to AngularJS (This Tutorial)
Tutorial #2 – AngularJS Directive with Example
Tutorial #3 – Build Single Page Application Using AngularJS
Tutorial #4 – Difference Between Angular Versions
Tutorial #5 – Protractor Tool for End-to-end Testing of AngularJS Apps
Tutorial #6 – Top AngularJS Interview Questions

********************************************************************************

Organizations try to employ people based on their productivity. If a person is capable of developing code and delivering output at a lesser time, then obviously he gets an edge over the others.

Considering the demand in the current markets along with the time taken for a complete beginner to learn and build real-world apps, the best programming language to learn right now, is AngularJS.

To start with the series, let’s have a brief introduction to AngularJS.

What is AngularJS?

AngularJS is a JavaScript framework that operates on the client-side and is used to develop web applications.

This means that the code you write will be executed by the browser and not by the server. It is a popular and powerful JavaScript framework and is widely used in single-page application projects and line of business applications.

Due to this, various AngularJs application development companies are in demand now.

When AngularJS Came into Picture?

Web development is one of the most preferred and cost-effective ways to create distributed applications.

The deployment done once on one machine can be made accessible to all the users on the world wide web. One of the performance issues that came up was the page posting issue which resulted in a communication lag between the client and the server.

AngularJS was developed by Misko and Adam Abrons in 2009 in order to help combat such issues and is being maintained by Google since then. It is an open-source project which means you can freely use and share it.

Several web applications are being built since their conception and many of the applications are listed on its website.

Why AngularJS?

We already have several JavaScript frameworks such as React JS, Node JS, Backbone JS, etc. But still, why do we prefer AngularJS to the existing ones?

When you develop web pages using AngularJS, the pages will not be refreshed frequently due to the operations that a user performs on the webpage. This, in turn, is necessary to give faster output to the users via the webpage.

But how does AngularJS achieve this?

The benefits of AngularJS which are stated below would answer the above questions.

There are several benefits as listed below:

#1) Dependency Injection

In software engineering, dependency injection refers to the passing of objects between the application and the client.

The injection is the phenomenon of passing a dependency (say an application service) to a dependent object (say a client) that would use it. AngularJS provides several core components for achieving this purpose in simplicity.

#2) Model View Controller

AngularJS is used to create Rich Internet Applications (RIA), and two-way data binding is achievable due to the MVC (model view controller) architecture in Angular JS.

A basic depiction of this architecture is as shown below:

MVC Model for AngularJS

As developers, we just have to split our code into the model, view, and controller and the rest of the operations such as managing the components and connecting them together will be automatically done by AngularJS.

#3) Two-way Data Binding

Software changes should be responsive, and changes within the system should be catered to the changes in the user interface and conversely, with precision and speed.

AngularJS offers this kind of binding by synchronizing between the model and the view.

#4) Testing

It is interesting to know the fact that AngularJS was designed keeping testing in mind, right from the beginning.

Any of the components of AngularJS can be comfortably tested using both unit testing and an end to end testing. The application can be transported across browsers for testing purposes.

#5) Controlling the behavior of DOM elements

Attributes of AngularJS can be linked to directives so that automatic initialization of the application is possible.

This means that there is modularity in AngularJS and with the help of its features such as directives and filters, a sense of customization and flexibility can be achieved in the code.

Now, we have seen the answers to all the why- questions that may arise as a result of apprehensions in learning something new, and I think we’re good to go.

It is always better to learn a technological trend and keep updating ourselves often to make the most out of our careers and also to keep that inquisitive mind of ours always thirsty for knowledge.

Pre-Requisites for Learning AngularJS

It is important and advantageous to know a few things in advance to speed up your learning pace.

HTML and CSS could be used to build your own web pages so that testing can be done on them. To code in AngularJS, it is important to have a basic understanding of JavaScript.

Hence, it is advisable to get a basic understanding of HTML and CSS along with the concepts of implementing JavaScript, before starting off with AngularJS.

Features of AngularJS

In the AngularJS language there are many offerings that are unique and exclusive. It is better to get yourself acquainted to these before setting up an environment to write and execute the code in AngularJS.

MVC Architecture

Model-View-Controller design of AngularJS has to be understood, for understanding how the code works.

MVC forms the core of this programming language and hence is very important too. Whenever an event occurs, the Controller part of the codebase receives the input of the event which consists of varied requests for the application.

The model part of the codebase, which usually is the core logic, coordinates with the controller and prepares the required data that has to be used by the view to generate a presentable output. Hence there is a separation of concerns within the programming language architecture as it isolates the application logic from the UI layer.

This is the reason for which AngularJS is widely used in developing Single Page Applications (SPA).

Directives

AngularJS is integrated with the HTML code to create web pages, and “Directives” are the special attributes of AngularJS and are used in order to integrate them.

Expressions In AngularJS

AngularJS expressions can contain literals, operators or variables, unlike the traditional JavaScript.

They could be written inside the HTML tag itself, but care has to be taken to add the ng-app directive, else the expression will be displayed as it is, without being solved.

AngularJS expressions could be written inside double curly braces or can be written inside a directive.

Syntax:

Inside curly braces:

<div ng-app=””>
<p>My first expression in Angular JS: {{3+3}}</p>
</div>

Inside directive:

<div ng-controller=”Name of your controller”>
<element ng-bind="your expression"></element>
</div>

AngularJS Numbers

This datatype is just like the JavaScript datatype and operators could be used to display results.

Example:

<div ng-app=””>
<p>The value of 5 times 10 is : {{5*10}}<p>
</div>

AngularJS Strings

Strings can be initialized using ng-init directive or ng-controller directive. The concatenation of strings is also possible when the + operator is used within the expression.

Strings also could be used as expressions within double curly braces or use ng-bind directive just like the AngularJS numbers.

Syntax:

Inside curly braces:

<div ng-app=”” ng-init=”first string variable name=’your first string’;second string variable name
=’your second string’”>
<p>My first string expression in Angular JS: 
{{ first string variable name + second string variable name }}</p>
</div>

Inside directive:

<div ng-app=”” ng-init=” first string variable name=’your first string’; 
second string variable name=’your second string’”>

<p>My first string expression in Angular JS:<span ng-bind=
" first string variable name + second string variable name "></span></p>

</div>

AngularJS Objects

AngularJS objects behave the same way in which the JavaScript objects behave. The items within an object could be accessed using the dot operator.

Syntax:

Inside curly braces

<div ng-app=”” ng-init=”your object name=
{first variable name=’your first value’,second variable name
=’your second value’}”>
<p>My first object in Angular JS: {{ your object name.second variable name }}</p>
</div>

Inside directive

<div ng-app=”” ng-init=”your object name={first variable name=’your first value’,second variable name
=’your second value’}”>

<p>My first object in Angular JS:<span ng-bind=" your object name.second variable name "></span></p>

</div>

AngularJS Arrays

AngularJS arrays behave the same way in which the JavaScript arrays behave.

The items within an array could be accessed by denoting the value’s index number within square braces. Please remember that the indexing starts from zero always, in an array, i.e., Array element 1 = index 0.

Array element 2 = index 1 and so on.

Syntax:

Inside curly braces:

<div ng-app=”” ng-init=”your array name=[your first value,your second value]”>
<p>My first array in Angular JS: {{ your array name[1] }}</p>
</div>

Inside directive:

<div ng-app=”” ng-init=”your array name=[your first value,your second value]”>
<p>My first array in Angular JS: <span ng-bind="your array name[1] "></span></p>
</div>

A code snippet Example showing all the expressions in AngularJS is given below:

[image source]

Please note, AngularJS:

• Does not support conditionals, loops, and exceptions in expressions.
• Does not support function declaration (even inside the ng-init directive) in expressions.
• Does not support bitwise, comma, void and new operator in expressions.
• Ignores the null or undefined properties in expressions.
• Expressions are evaluated belonging to the scope object and not the global window.

AngularJS Filters

Filters are exclusive to AngularJS and are not present in the traditional JavaScript.

The filters are used to modify output data to make them compatible with different input data. The filters could be used in expressions or directives with the help of the pipe operator.

These are the different kind of filters which are commonly used:

Uppercase: Helps to format the strings into uppercase.

Syntax:

<div ng-app=”” ng-controller=”first string variable name”>
<p>My first string expression in uppercase in Angular JS: 
{{ first string variable name | uppercase}}</p>
</div>

Lowercase: Helps to format the strings into lowercase.

Syntax:

<div ng-app=”” ng-controller=”first string variable name”>
<p>My first string expression in lowercase in AngularJS: 
{{ first string variable name | lowercase}}</p>
</div>

Currency: This filter is used on number expressions to convert them and display in terms of currency. Pipe operator could be used along with the number of expressions for this conversion.

Syntax:

<div ng-app=”” ng-init=”your number value”>
<h1>Price : {{ your number value | currency }}</h1>
 </div>

Filter: This can be used only on arrays to select a subset of an array.

Syntax:

<div ng-app=”” ng-controller=”your array name”>
<ul>
<li ng-repeat=”x in your array name | filter: ‘i’”>
{{x}}
</li>
</ul>
</div>

orderBy: This filter can be added to directives such as ng-repeat to display them in order. Pipe operator can be used with the ng-repeat in unordered lists to achieve this.

Syntax:

<div ng-app=”” ng-controller=”your object name”>
<ul>
<li ng-repeat=”x in your object name | orderBy:’your desired order’”>
{{x.your first variable+x.your second variable}}
</li>
</ul>
</div>

The code Examples below show all the filters being used:

AngularJS supports internalization for currency, numbers & date and we just have to incorporate the corresponding JavaScript based on the country in which we deploy the application in.

How to Setup the Environment to Work with AngularJS?

Before creating our codebase and performing simple operations using AngularJS, we must set the environment up. Any text editor of the latest version such as Notepad ++ and a browser of your choice should be kept handy to start with.

Now, navigate to the official website of AngularJS to download the desired version of AngularJS.

Follow these steps to ensure proper download of the application:

#1) Click on “Download AngularJS”

#2) Enter the details based on the following:

Branch: Choose a stable version (for new web pages) or legacy version (for using AngularJS on previously built websites).

Build: Choose between uncompressed (presented with proper formatting and indentation ensuring readability – development mode), minified (for deployment purposes to the production server, to create compressed versions of the developed code) or zip.

CDN (Content Delivery Network): Specify CDN to get the AngularJS script file.

This path can be customized (by adding a path from your local machine) or can be used as it is in the HTML code that you will be writing for your web pages.

Including script from CDN:

<script
src=” https://ajax.googleapis.com/ajax/libs/angularJS/1.7.2/angular.min.js”
type=”text/javascript”>
</script>

Including script from local machine:

<script
src=” scripts/angular.js”
type=”text/javascript”>
</script>

Once the environment setup is done, you can run your first AngularJS program by including your code path within the HTML that you have created for your web page.

Your First Application

You can build a small HTML code as shown below and integrate your AngularJS script to start off your first programming experience with AngularJS.

<html>
<head>
<title>Angular JS First application</title>
</head>
<body>
<h1>First application</h1>
<div ng-app=”MyApp”>
<p>Enter your Name : <input type=”text” ng-model=”name”></p>
<p>Hello <span ng-bind=”name”></span>!</p>
</div>
<script src=” https://ajax.googleapis.com/ajax/libs/angularJS/1.7.2/angular.min.js”>
</script>
</body>
</html>

Once you save this file as HTML and run it on any browser, you will get the output as shown below.

After successfully completing the execution of your first program, you can use AngularJS to simplify many complex programs in your projects.

Limitations of AngularJS

Given below are few limitations of AngularJS:

1. It is not a very secure JavaScript framework. Server-side authorization and authentication are necessary and significant to keep the codebase secure.
2. An application built using AngularJS is not degradable. This means that, when a user disables JavaScript, then he would just see the basic page and nothing apart from that.

As observed, we know that the plus points are more, hence AngularJS is the most sought-after technology in recent times.

Also read =>> D3.js Tutorial For Beginners

Conclusion

AngularJS is the most popular programming language in the market after python.

It is preferred for building web applications and mostly SPAs in a cost-effective and effortless way. Its upgraded version is Angular 2. This programming language based on Angular JS is giving a new flavor to the object-oriented programming style.

Author: Thanks to Ankit Srivastava for this series. He is having good experience in AngularJS and IoT app development.

Check out the upcoming AngularJS tutorials to explore more about AngularJS!!

NEXT Tutorial