Getting Started With Angular.js

Before starting to write the code, let us first understand Angular.js.

Angular.js

This is a library like jQuery. A Single Page Application (SPA) is one in which we have a shell page and we can load multiple views into that. In a SPA we can load the initial content upfront and then the various views or the little kind of mini- web pages can be loaded on the fly and embedded into the shell.

It is based on:

  • Directives
  • Data Binding Expressions

Use the following procedure to write the code with Angular.js.

Step 1: Create an empty ASP.NET website named "Angular_JS".

Create a empty AspNet website

Step 2: Add a page of HTML into it named "Example1".

Add a page

Step 3: Download Angular.js from the link Angularjs and save it into your website.

Download the Angular

Note: I am using Angular.min.js in this website.

Step 4: After adding the Angular.js into the website, write the script tag that will access the Angular file.

adding the Angular.js in to the website

Step 5: Now to write the code using Directives and Data binding expressions in the page.
  • Write the ng-app directive in the <html> tag, that is necessary to initialize the Angular app like:
     

    <html ng-app xmlns="http://www.w3.org/1999/xhtml"></html>
     

  • Write a TextBox into the body tag with the ng-model="name" directive, that will add a property in the memory called "name" like:
     

    <input id="Text1" type="text" ng-model="name" />
     

  • In the end write a Data Binding Expression of the property named "name" within the brackets syntax like {{property name}} and here the property name is "name" so it will be written like:

    {{name}}

ng-app directive 

Step 6: Run the page.
 
Run the page
Now when you type any text in the TextBox, it will automatically show after the string "Hi, you are typing" like:
 
textbox

Great; you have now done it successfully.