What is Angular JS?

May 29, 2017

richa

Wordpress

0

AngularJS (Angular JavaScript) is a complete JavaScript-based open-source front-end Web Application Framework which is maintained by Google to address many of the challenges encountered in developing single-page applications. AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.

Advantages of AngularJS

  • AngularJS provides a capability to create Single Page Application in a very clean and maintainable way.
  • AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
  • With AngularJS, a developer writes less code and get more functionality.
  • On top of everything, AngularJS applications can run on all major browsers and smartphones including Android and iOS based phones/tablets.

 

ANGULAR JS ENVIRONMENT SETUP

 

Include AngularJS

We have included the AngularJS JavaScript file in the HTML page so we can use AngularJS −

 

Point to AngularJS app

The HTML contains the AngularJS by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below −

View

The view is this part −

ng-controller tells AngularJS what controller to use with this view. helloTo.titletellsAngularJS to write the “model” value named helloTo.title to the HTML at this location.

Controller

The controller part is −

 

This code registers a controller function named HelloController in the angular module named myapp. We will study more about modules and controller in their respective chapters. The controller function is registered in angular via the angular.module(…).controller(…) function call.

The $scope parameter passed to the controller function is the model. The controller function adds a helloTo JavaScript object, and in t, at object it adds a title field.

 

Execution

Save the above code as myfirstexample.html and open it in any browser. You will see an output as below −

Welcome, AngularJS to the world of Tutorialspoint!

 

  • HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angularglobal object is created. Next, JavaScript which registers controller functions is executed.
  • Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
  • Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts −

  • Model − It is the lowest level of the pattern responsible for maintaining data.
  • View − It is responsible for displaying all or a portion of the data to the user.
  • Controller − It is a software Code that controls the interactions between the Model and View.

MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.

Steps to create AngularJS Application

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

Step 2 − Define AngularJS Application using ng-app directive

Step 3 − Define a model name using ng-model directive

Step 4 − Bind the value of above model defined using ng-bind directive.

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.

testAngularJS.htm

 

Post by richa

Leave a Reply

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