AngularJSTopics

First Application in AngularJS:-
AngularJS applications are a combination or mix of HTML and JavaScript. The first thing you need is an HTML page. 
  


<!DOCTYPE html>  
<html>  
<head>  
.  
.
.
.  
</head>  
<body>  
.  
.
.
.   
</body>  
</html>



Second, you need to include the AngularJS JavaScript file in the HTML page so we can use AngularJS: 
  

<!DOCTYPE html>  
<html>  
<head>  
   <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>  
<body>  
.  
. 
.
. 
</body>  
</html>


Note:- You should always use the latest version of AngularJS, so it is not necessary to use the same version as the above example.

Steps to create AngularJS Application:-
Step 1 − Load framework Being a pure Being a pure JavaScript framework, It can be added using <Script> tag. 

  


<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>


Step 2 − Define AngularJS Application using ng-app directive 
  


<div ng-app = "">
   ...
</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>


First Example of AngularJS:- 
  

<html>
   
   <head>
      <title>AngularJS First Application</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Sample Application
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
     
      
   </body>
</html>


An AngularJS application consists of following three important parts −
  1. ng-app This directive defines and links an AngularJS application to HTML.
  2. ng-model This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind This directive binds the AngularJS Application data to HTML tags.

How AngularJS integrates with HTML:-
  1. ng-app ng-app directive indicates the start of AngularJS application.
  2. ng-model 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.
  3. ng-bind ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.
  4. Closing Closing ' </div> tag indicates the end of AngularJS application.