What is Angular JS?
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:
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:
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
Step2: Then define the application using ng-app directive.
<div ng-app= “ ”> …. //some content </div>
Step3: Then we will define a model name using ng-model directive.
<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:
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>Enter the username:</p> <p>Username: <input type="text" ng-model="name"></p> <p> Welcome <ng-bind="name"></p> </div> </body> </html>