Scroll to top

Angular Beginners Tutorial

What is Angular JS?

The Angular JS is a client side framework which is developed by Google and it is written in javascript with a reduced jQuery library which is known as query lite. The Angular JS provides a framework that helps us to implement well designed and structured web pages and applications using an MVC framework. It also provides the functionality to handle the user input in the browser, control how the elements should be displayed in the browser and manipulate the data on the client side.

Benefits of using Angular JS:

  • Data Binding: In Angular JS it has a very clean method to bind data to HTML elements by using powerful scope mechanism.
  • Extensibility: The architecture of Angular JS enables us to extend the every aspect of language to provide our own custom implementations.
  • Clean: The Angular JS helps us to write clean and logical code.
  • Reusable code: With the combination of extensibility and clean code makes very easy to write reusable code in Angular JS.
  • Support: Angular JS is supported by Google and it provides the advantage where the other similar initiative has been failed.

 Disadvantages of using Angular JS:

  • It is not secure, so being the javascript only the framework the application written in Angular JS is not safe. The server side authentication and authorization should be kept to keep the application secure.
  • The Angular JS is not degradable because if the application user disables the javascript, then the user will be able to see the basic page only and nothing else.

Components of Angular JS:

The Angular JS can be divided into three parts:

  • ng-model – In this we bind the values of Angular JS application data to HTML input controls.
  • ng-app – In this we define the links of an Angular JS application to HTML.
  • ng-bind – In this component we bind the Angular JS application data to HTML tags.

Angular JS MVC Architecture

In Angular JS MVC stands for Model View Controller, it is a software design pattern which is being used for developing web applications. The Model View Controller pattern consists three parts. They are:

  • Model – Model is the lowest part of the pattern which is responsible for maintaining the data.
  • View – This part is responsible for displaying all or just a portion of the data to the user.
  • Controller – This part is a software code which controls the interactions between Model and View.

This MVC architecture is famous because it isolates the application logic from the user interface layer and supports the separation of concerns. In the MVC architecture the controller receives all the requests for the application and then works with the Model part to prepare any data needed by the View. The View then uses that data which is prepared by the Controller to generate a final presentable response.


Model is responsible for managing the application data, it responds to the request from View and to the instructions from Controller to update itself.


The view is responsible for displaying all the data or only a portion of data to the users and it also specifies the data in a particular format that is triggered by the Controller’s decision to present the data. It is a script based template system such as asp, PHP, JSP and is easy to integrate with AJAX technology.


The controller is responsible to control the relation between the Model and View, it responds to user input and performs interactions with the data model objects. The Controller receives the input and validates it and then performs business operations that modify the state of the data model.

Angular JS Application

The Angular JS Application consists of three parts, so before creating the first application let us understood the three important parts of the application. They are:

  • ng-app: This part defines and links the application to the html.
  • ng-model: This part attach the values of application data to the html input controls.
  • ng-bind: This part attach the application data to the html tags.

Let us have a look on how to create our first application in Angular JS:

Step1: Firstly load the framework as it is a pure javascript framework so it can be added using <script> tag.

<script src = "">


Step2: Then define the application using ng-app directive.


<div ng-app= “ ”>

….      //some content


Step3: Then we will define a model name using ng-model directive.

For example:

<p> Username: <input type= “text” ng-model = “name”></p>

Step4: Then we will bind the value of the above model which is defined using ng-bind directive.

<p> Welcome <ng-bind = “name”></p>

Let us understand the application through simple example:


<script src=""></script>


<div ng-app="">

<p>Enter the username:</p>

<p>Username: <input type="text" ng-model="name"></p>

<p> Welcome <ng-bind="name"></p>



Author avatar

Post a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.