Post
Ask Question

Getting Started With AngularJS

 
AngularJS is a super heroic Javascript MVW Framework for building Single Page Application (SPA) and dynamic apps. Here MVW stands for Model View Whatever (that may be Model View Controller architecture or Model View View-Model architecture or MV*). AngularJS developed in 2009 by Misko Hevery and currently maintained by Google.

In this tutorial series, we will cover the following topics:

 
Let's create our first Hello World application using AngularJS

Go to this link and click on the Download button.

 
After that, a modal pop-up comes on screen. Under branch, select 1.4x (stable) version and a uncompressed version of AngularJS which is best for debugging and development purpose (Select Minified version of the AngularJS for deploying your application but only if you can't use Google's CDN. The zipped version of the AngularJS contains both the builds of AngularJS, as well as documentation.

 

Click on Download button.

 

Add Script folder in the root directory of your application andadd your downloaded Angular script in that folder.



If you are using Visual Studio IDE, then you can also add AngularJS in your application using Nuget Packets. Right click on your project from Solution Explorer and click Manage NuGet Packages.

 

Search for AngularJS in Manage NuGet Packages then click on Install for installing / adding AngularJS in your project.



Now add AngularJS script in your application. After that add ng-app directive in your application. ng-app directive can be added at document level or body level or at Div level. ng-app Directive defines angular application and used for loading various AngularJS modules in the application. After that add double curly brace notation {{ }} to bind expressions to elements built-in Angular markup.

 
Code: 
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3. <head>  
  4.     <title>Angular Hello World Application</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body>  
  8.     {{4+4}}  
  9. </body>  
  10. </html>  
Save and run your application. You will see the expression inside Markup/Template ({{}}) is evaluated.

 
 
Let's Create Hello World Application

Add a textbox with ng-model directive. ng-model directive binds HTML control with a model / property which is used in Angular Application. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template.

 
Code:
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3. <head>  
  4.     <title>Angular Hello World Application</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body>  
  8.     <input type="text" ng-model="name"/><br />  
  9.     <p>Hello {{name}}!</p>  
  10. </body>  
  11. </html>  
Save and run the Application.

 

We can also do the same thing using ng-bind directive in our application. ng-bind directive binds the model value to the HTML control/View.
Code:
  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3. <head>  
  4.     <title>Angular Hello World Application</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body>  
  8.     <input type="text" ng-model="name"/><br />  
  9.     <p>Hello <span ng-bind="name"></span>!</p>     
  10. </body>  
  11. </html>  
 
Hope you liked it. Thanks!


Similar Articles