Dot Net Stuff

How to use Angularjs to develop your first Angularjs web Application


Many developer who want to learn Angularjs application development have some confusion in their mind to set up Angularjs development environment, this article contains basics of starting with Angularjs. Here are the steps for creating your first Angularjs application including setup the development environment for Angularjs.

Download Angularjs Library:

To download Angularjs library you need to go at http://angularjs.org/. When you open the link http://angularjs.org/., you will see there are two options to download AngularJS library −

  • View on GitHub − Click on this button to go to GitHub and get all of the latest scripts.
  • Download − Click on this button, a screen as below would be seen −

Download Angularjs

This screen provides different options of using Angular JS as given below −

  • Download Angularjs library and hosting files locally There are two different options legacy and latest. legacy has version less than 1.2.x and latest has 1.4.x version.
    You can also go with the minified, uncompressed or zipped version.
  • Using Angularjs library with CDN access − The CDN will give you access around the world to regional data centers that in this case, Google host. Therefore, using CDN moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of AngularJS from the same CDN, it won't have to be re-downloaded.

The better option to go with CDN and we are using the CDN versions of the library throughout this tutorial. Let’s create our first Angularjs simple example.

Here’s a simple example using AngularJS library. Let’s create an HTML file angularjsexample.html as below −

 
<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{hello.title}} to the angularjs tutorial at dot net stuff.</h2>
      </div>   
      <script>
         angular.module("myapp", [])         
         .controller("HelloController", function($scope) {
            $scope.hello = {};
            $scope.hello.title = "Learner";
         });
      </script>    
   </body>
</html>

Now let’s understand what the above code means −

Include AngularJS Library in your project

By including the AngularJS JavaScript file in the HTML page, we are able to use AngularJS −

 
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>  

By using cdn you can always use the latest version of AngularJS Library easily. Check the latest version of AngularJS on their official website.

What is ng-app in AngularJS

Using ng-app in body will declare that the part of the HTML contains the AngularJS app. This is done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element (e.g div) or body element as shown below −

 
<body ng-app = "myapp"> 
</body> 
<div ng-app = "myapp"> 
</div> 

Using View in AngularJS-

Following are the view shown −

 
<div ng-controller = "HelloController" > 
<h2> Welcome {{helloTo.title}} to the angularjs tutorial at dot net stuff.</h2> 
</div> 

Here ng-controller tells AngularJS Library that what controller to use with this view. hello.title tells AngularJS to write the "model" value named hello.title to the HTML at this location.

Controller in AngularJS-

Following are the sample code shows the controller −

 
<script>
   angular.module("myapp", [])
      .controller("HelloController", function($scope) {
      $scope.hello = {};
      $scope.hello.title = "Learner";
   });
>/script>

Above code registers a controller function named HelloController in the angular module named myapp. The controller function is registered in angular via the angular.module(...). controller(...) function call.

The $scope parameter passed to the controller function is the model. The controller function adds a hello JavaScript object, and in that object it adds a title field.

Execution sample AngularJS application

Save the above code as angularjsexample.html and open it in any browser. You will see an output as below −

 
Welcome Learner to the angularjs tutorial at dot net stuff.

Let’s understand the execution flow of AngularJS. When the page is loaded in the browser following things happened −

  • HTML document is loaded into the browser, and evaluated by the browser. Than AngularJS JavaScript file is loaded and the angular global object is created. After that, JavaScript which registers controller functions is executed.
  • After registering controller functions, AngularJS scans through the HTML to look for AngularJS apps and views and once the view is located, AngularJS connects that view to the corresponding controller function.
  • Now, AngularJS executes the controller functions. While executing the controller function, AngularJS renders the views with data from the model populated by the controller and you will see the output.

Summary: In this article my focus is to explain the basic and the first thing to learn the AngularJS, How the AngularJS works and how the to create your first AngularJS sample using AngularJS CDN library. You can download sample code here. This article also focus on the flow of AngularJS to render a webpage. I hope you will like this article and now you are able to start with AngularJS easily.


Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus