Steps to Implement AngularJS | Hello World Program Using AngularJS | AngularJS Programmer Guide

,
AngularJS is mostly used as a client side MVC (model view controller) framework. Here we have the view (the html page) and a basic model (model.firstName). AngularJS uses directives to provide data binding. We bind an input box by using the ng-model directive and display model values by using the mustache syntax. Angular is bootstrapped by using the ng-app directive. We can only have one such directive per page. If AngularJS sees this directive on the page it parses the page and compiles it. It is during this stage where the directives are interpreted or executed and the data binding is established.

Step by step guide for AngularJS:

  1. Create a new folder HelloAngular.
  2. Download the angular.js file.
  3. Copy the downloaded JavaScript file angular.js into the above folder.
  4. Using your favorite text editor create a new file step1.html in the same folder.
  5. Add the necessary html tags for a standard HTML5 web page
    image
  6. Add angular.js to the page by adding a <script> tag at the end of the<body>image
    Note: It is considered best practice to include your JavaScript files not in the<header> but rather at the end of the <body>
  7. Load the web page with you favorite browser to make sure everything is ok.
  8. Add an input of type text to the body and use the first AngularJS directive, the attribute ng-model. As an attribute value we choose model.firstName.
    image
  9. Add a <div> after the above <input> and use the so called mustache syntax to display the value of model.firstName inside the <div>
    image
  10. Save the file and refresh the browser. Type something into the textbox. Note that where we defined the <div> we see the mustache template{{model.firstName}} instead of the (expected) value of the model. The reason is that we did not yet bootstrap Angular and thus up to now Angular just sits there inactive on our page.
    image
  11. Add the ng-app directive to the <body> tag. When Angular sees this attribute on the page it starts to parse and compile the page upon loading.
    image
  12. Save the page the refresh you browser. Type your name into the input box. Notice that the value now gets reproduced inside the <div>.
    image