Hello Friends, In this tutorial you are going to learn about a simple Hello World Angular Js Application.

After Completing this tutorial you will be able to understand:

  • What is Angular Js?
  • Why should we use Angular Js?
  • Features of Angular Js.
  • How to create a Hello World application using Angular Js?

What is Angular Js?

Angular Js is an open source JavaScript framework. Angular Js is a client side scripting language framework that follows MVC (Model-View-Controller) pattern. Angular Js was started as Google project but not it is an open source library that minimises the error. No need to worry about to learn new syntax’s or programming language since Angular Js is totally based on HTML and JavaScript.

Features of Angular Js:

Follow MVC Pattern: As we have already discussed that Angular Js follows MVC pattern. MVC stands for Model-View-Controller which is followed by all web application. MVC separates our application into three layers Business Logic Layer, Data Layer and Presentation Layer. This separation of the application into three layers makes it more reliable to manage. The code becomes easier to understand and to manage.

Two-Way Binding: Angular Js supports Two-Way data binding. So the question is what is Two-Way Data Binding? Two-Way Data Binding means the data can flow in both directions. This means that any changes in the model immediately reflected to the matching View (s) and any changes in the View immediately reflected to the underlying model.

Needless Code to Write: For Dom manipulation, we need to write lines of JavaScript code. But with Angular Js, you need to write the lesser amount of code for Dom manipulation.

Unit Testing: You can test your Angular Js application using the testing framework provided by Google. Google has developed a testing framework called “Karma” to test Angular Js application.

Angular Js

Why should we use Angular Js?

  • Since Angular Js was developed by Google. So it has a large community to help you.
  • Angular Js follows MVC pattern. It becomes easier to manage and test your code.
  • Since Angular Js follows Two-Way Data Binding. So no need to write extra code to update the UI.
  • It encapsulates your application behaviour which is instantiated by dependency injection.
  • The testing framework provided by Google makes it easier to test your JavaScript.
  • Angular Js allows you to create your own reusable component that fulfils all your need.

No need to wait. Let’s create a simple Hello World application using Angular Js. Below is the code:

 

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloWorldController" >
 <h2>Hurrayy!! My First Hello {{SayHello.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
 .controller("HelloWorldController", function($scope) {
 $scope.SayHello = {};
 $scope.SayHello.title = "World, AngularJS Application";
 } );
</script>
</body>
</html>

Save the file as HTML and run in the browser.

Angular Js

Conclusion:

I hope now are clear about what exactly is Angular Js and why should we use it? We will continue learning on more topics about Angular Js.

Leave a Comment