AngularJS Example

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

AngularJS applications are a mix of HTML and JavaScript. The first thing you need is an HTML page.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. .  
  5. .  
  6. </head>  
  7. <body>  
  8. .  
  9. .  
  10. </body>  
  11. </html>  

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>  
  5. </head>  
  6. <body>  
  7. .  
  8. .  
  9. </body>  
  10. </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.

AngularJS First Example

Following is a simple "Hello Word" example made with AngularJS. It specifies the Model, View, Controller part of an AngularJS app.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>  
  5. </head>  
  6. <body ng-app="myapp">  
  7. <div ng-controller="HelloController" >  
  8. <h2>Hello {{helloTo.title}} !</h2>  
  9. </div>  
  10.   
  11. <script>  
  12. angular.module("myapp", [])  
  13.     .controller("HelloController", function($scope) {  
  14.         $scope.helloTo = {};  
  15.         $scope.helloTo.title = "World, AngularJS";  
  16.     } );  
  17. </script>  
  18. </body>  
  19. </html>   

View Part

  1. <div ng-controller="HelloController" >  
  2. <h2>Hello {{helloTo.title}} !</h2>  
  3. </div>  

Controller Part

  1. <script>  
  2. angular.module("myapp", [])  
  3.     .controller("HelloController", function($scope) {  
  4.         $scope.helloTo = {};  
  5.         $scope.helloTo.title = "World, AngularJS";  
  6.     });  
  7. </script>