AngularJS Getting Started
You can directly start using AngularJS script in your web application by defining Script tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
To create a basic functioning app we will use:
- ng-app – This is like a start function of any AngularJS application (same like main in C#).
- 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.
Example:
<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<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>
</select>
</p>
<hr/>
<p>Name: <b>{{name}}</b></p>
<p>Age: <b>{{age}}</b></p>
<p>Gender: <b>{{gender}}</b></p>
</body>
</html>
DEMO:
Explanation:
- 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.
- 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).
- {{}}: 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.