In the AngularJS environment, we just saw how and where to write code. Let us know learn a step by step procedure to create your first AngularJS application.

Also Read: Angularjs Components

Any AngularJS application consists of following main parts:

1. ng-app : The ng–app directive tells AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. You can only have one ng–app directive in your HTML document. If more than one ng–app directive appears, the first appearance will be used.

2. ng-model : The ngModel directive binds an input , select , textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. ngModel is responsible for: Binding the view into the model, which other directives such as input , textarea or select require.

3. ng-bind : The ng–bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.

Steps to create AngularJS Application:

Step 1 − Load framework

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

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script>

Step 2 − Define AngularJS Application using ng-app directive

<div id=’content’ ng-app=” ” ng-controller=” “>

</div>

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

<p>Enter your Name: <input type = “text” ng-model = “name”></p>

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

<p>Hello <span ng-bind = “name”></span>!</p>

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.

Application1JS.htm

Output

Open Application1JS.htm in a web browser. Enter your name and see the result.

How AngularJS integrates with HTML

• ng-app directive indicates the start of AngularJS application.

• ng-model directive then creates a model variable named “name” which can be used with the html page and within the div having ng-app directive.

• ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.

• Closing</div> tag indicates the end of AngularJS application.