AngularJS - First Application
Steps to create AngularJS Application
Let's create a simple AngularJS web application step by step.
Step 1 - Load library
Add following script tag in head section of your html document to load AngularJS library.
Steps to create AngularJS Application
Let's create a simple AngularJS web application step by step.
Step 1 - Load library
Add following script tag in head section of your html document to load AngularJS library.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
Step 2 - Bootstrap AngularJS:
An AngularJS application is bootstrapped using ng-app directive. This is the most important directive in AngularJS. It refers to the part of your HTML which will be controlled/managed by AngularJS. In this example, we used it on html tag, that means AngularJS will control the whole document. You can also put this tag on a specific element. In that case, only that element and it’s child elements will be controlled by AngularJS. Anything outside will remain inaccessible to AngularJS.
<html ng-app="">
Step 3 - Define a model using ng-model directive
<div> Enter your Name: <input type="text" ng-model="name"> </div>
In the above code consider the input tag, it has directive named ng-model. The ng-model directive is used with input fields to get access to the user input into JavaScript variables. Here, we are storing this field value in a javaScript variable called name.
Step 4 - Bind the value of model by using ng-bind directive
<div>
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>...</p>
</div>
In the above code ng-bind directive is used to get the value from the variable referred by ng-model.
Final Code
Putting all together the final code is given below.
See the Pen AngularJs First App by Mukesh (@mrajpolaris) on CodePen.
The above example is plain HTML code with couple of AngularJS directives such as ng-app, ng-model, and ng-bind. As of now don't think much about these directives,We will discuss each and every directives in separate article.
References :- AngulaJS Documentation
Related Articles
