AngularJS Getting Started

  • by

AngularJS Getting Started

You can directly start using AngularJS script in your web application by defining Script tag.

<script src=""></script>

To create a basic functioning app we will use:

  1. ng-app – This is like a start function of any AngularJS application (same like main in C#).
  2. ng-model – This directive binds value of HTML control (like a textbox,select,textarea) to AngularJS application. It helps in registering control with the Model and ensures two-way binding.


<title>AngularJS - Example</title>
<script src=""></script>
<body ng-app>
<p>Enter name: <input type="text" ng-model="name"/></p>
<p>Enter Age: <input type="text" ng-model="age"/></p>
<p>Select Gender:<select ng-model="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Others</option>
<p>Name: <b>{{name}}</b></p>
<p>Age: <b>{{age}}</b></p>
<p>Gender: <b>{{gender}}</b></p>



  1. ng-app: Here, ng-app directive is used in the body element, which means AngularJS will start-off on this HTML page from here. It is the start-point. If you don’t declare this anywhere on form HTML form, AngularJS will not work.
  2. ng-model: ng-model declares the variables (name, age, gender) and binds it with the html controls. (select & input controls to its corresponding model, any changes made on these controls will reflect immediately in the AngularJS application).
  3. {{}}: This is an expression. Any model name written inside this will be replaced using the model data.

In the next part, we will learn more about ng-app and Expressions.