Who is not talking about Angular.JavaScript? Undoubtedly it is the most powerful framework (not library) to create Single Page Applications (SPA). In this Learn AngularJS series, I will focus on the basics of Angular. This series will help you in getting started with AngularJS. In the first hour we will write the first AngularJS app and understand bootstrapping of AngularJS applications.
Hello World AngularJS Application
The best way to start learning is to write a Hello World web app using AngularJS. Let us start by downloading AngularJS. Navigate to angularjs and click on the Download button. You have various download options. I am going with the Minified version of 1.3x. You are free to choose Uncompressed, Zip or even use CDN in your project. If you are using Visual Studio as the development IDE then you can add AngularJS using Manage Nuget packages also.
![Download AngularJS]()
I have downloaded the minified version and added it to the demo project. To work with AngularJS, we first need to add a reference of AngularJS.
![reference of AngularJS]()
As you see we need only one file to work with AngularJS. Now let us start writing a very simple application with AngularJS.
To start I created a div with the following content.
![div]()
On render we will get the following output that is expected.
![output]()
Let us convert the above HTML in the Angular application. To do that we need to add the Angular directive ng-app. This directory can be added at the entire document level or body level or at the div level. I am adding at the body level as below.
![add Angular directive ng-app]()
Now On render we will get the following output:
![render]()
As you see now the DOM has been converted to an Angular application, hence {{2+2}} has been evaluated to 4. Let us consider one more example, in the following example we are binding a ng-model directive to an expression.
![ng-model directive]()
As you type you will get data get printed from the model in the expression. So Angular is binding data from the model to the expression very easily.
Bootstrapping of AngularJS ApplicationNow let us understand Bootstrapping of AngularJS Apps. Bootstrapping is how AngularJS is initialized in the application. The following two steps do that.
- Add a reference of AngularJS using a script. Recommended is to add a reference at the bottom of page, such that the app load time is improved.
- Next add a ng-app directive at the root of the application, in other words on the HTML tag. This will auto-bootstarp the application.
Bootstrapping of the Angular App happens in the following three steps:
![app]()
In further posts we will talk about Injector and Dependency Injection. In our example we put the directive in the body element. To create a root scope at the entire application level, we need to put a ng-directive at the HTML level.
![HTML]()
Let us conclude the first hour of learning AngularJS. The full code for binding with the static model is given below.
- <!DOCTYPE html>
- <html ng-app>
- <head>
- <title>Angular Demo</title>
- <script src="Scripts/angular.min.js"></script>
- </head>
- <body>
- <div >
- Grade <input type="text" ng-model="grade" />
- <br/>
- Printing from Model :
- <br/>
- {{grade}}
- </div>
- </body>
- </html>
On running this application you will get an application that, on typing into the TextBox, the value will be bound to the DOM. I hope the first hour of learning is useful.