How to create first application in AngularJS
An AngularJS application consists of following three main parts −
- ng-app− Defines and links application to HTML.
- ng-model− Binds the values of application data to HTML input controls.
- ng-bind− Binds the Application data to HTML tags.
Watch this Full Stack Web Development Course Video:
Steps to create AngularJS Application
Step 1: Load framework
It is done by using <Script> tag.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Step 2: Define Application using ng-app directive
<div ng-app = "">
//code
</div>
Step 3: Define a model name using ng-model directive
<p>Enter Text: <input type = "text" ng-model = "name"></p>
To learn more about Angular check out Intellipaat’s Angular Training.
Step 4: Bind the value of above model defined using ng-bind directive.
<p>Hello<span ng-bind = "name"></span></p>
Example: Hello Program in AngularJS
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title> Welcome AngularJS </title>
</head>
<body>
<h1> Hello Program in AngularJS </h1>
<div ng-app = "">
<p>Enter Text:<input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span></p>
</div
</body>
</html>
Save this file as HelloAngularJs.html and run in web browser.
Output
Learned to create your first application on AngularJS? Head onto to create a shopping cart using AngularJS.