Post
Ask Question

Basics of AngularJS

Introduction

In this post we are going to discuss about AngularJS Most of you are familiar with the word AngularJS. This article is for those beginners who have not yet tried to implement AngularJS yet.


Please see this article in my blog: Basics of AngularJS 

Download the source code

What AngularJS is

AngularJS has been introduced by the giant Google. It is a framework that helps you create dynamic web apps. Normally AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write efficient code. The interesting fact is you can reduce lines of codes you may need to write when you use normal JavaScript.

Using the code

So let's start using AngularJS. What would be the first step you need to do? That would be to include the relevant JavaScript file as in the following:
  1. <script src="~/Script/angular.min.js"></script>  
Once you include this file, you are free to enter the world of AngularJS. You can download that file from: https://angularjs.org/

Basic Directives: There are some basic directives that you must be aware of in AngularJS. They are the following.
  • ng-app
  • ng-init
  • ng-model
  • ng-repeat
We will discuss them. Let's start with a basic example.

As I said before, AngularJS uses our HTML to work. So here we will create HTML with minimal tags. Are you ready?
  1. <div ng-app>  
  2.     <p>My name is : {{"Please make me upper case letter".toUpperCase()}}</p>  
  3. </div>  
In the preceding example we added the tag ng-app, right? So what is ng-app?

ng-app

The ng-app tag indicates the root element of our angular application. It normally acts as the owner of the application. We can use AngularJS only after the declaration of this tag. The important point to remember is that we can't use AngularJS before this tag. We will explain this with an example.

What if we add a calculation of two numbers before the ng-app tag? We will check it out.
  1. <p>Add me please: 2+2: {{ 2+2 }}</p>  
  2. <div ng-app>  
  3.     <p>My name is : {{"Please make me upper case letter".toUpperCase()}}</p>  
  4. </div>  
What would be the output of this? Any guess?



So what we need to make this work? For that you must put the code after the ng-app declaration. Can we try that? So our modified code would be as follows.
  1. <div ng-app>  
  2.     <p>My name is : {{"Please make me upper case letter".toUpperCase()}}</p>  
  3. <p>Add me please: 2+2: {{ 2+2 }}</p>  
Now our output is:



Well, that was the introduction to the directive ng-app. I hope you tried it. Now we will move on to the next one. What is it?

ng-init

As the name implies, ng-init is used to initialize the data of our AngularJS. We will try a demo. So the following is my HTML.
  1. <div ng-init="myFavoriteWebsites=['http://www.c-sharpcorner.com/','http://www.codeproject.com/','http://sibeeshpassion.com/']">  
  2.         My First fav website is : {{myFavoriteWebsites[0]}}  
  3.         <br />  
  4.         My Second fav website is : {{myFavoriteWebsites[1]}}  
  5.         <br />  
  6.         My Third fav website is : {{myFavoriteWebsites[2]}}  
  7.     </div>  
Please note that I have used the ng-init tag after the ng-app tag. Now can you guess what the output would be?



I hope you understand what exactly ng-init tag is. Now we will see ng-model.

ng-model

Basically the ng-model directive binds the values from our HTML controls to our application data. Sounds good, right?
  1. Currency in INR: <input type="number" ng-model="curinr" />  
  2. <br />  
  3. Currency in Dollar: {{curinr*62.27}}  
In the preceding example, we are using ng-model “curinr” and we are accessing that in our application data. In this process, whenever you type any value into the number box area, in a fraction of time you can see the calculated value. That is the power of AngularJS.



So I hope you understood how to use the ng-model directive. Now it is time to move on to our next directive, ng-repeat.

ng-repeat

This directive is used for looping through a collection or array just like we use a foreach loop in C#. Sounds pretty cool, right? It clones the HTML elements once for each item in the collection.

To work with ng-repeat we will see our previous example. We will modify that example as follows:
  1. <div ng-init="myFavoriteWebsites=['http://www.c-sharpcorner.com/','http://www.codeproject.com/','http://sibeeshpassion.com/']">  
  2.         <ul>  
  3.             My favorite websites are:  
  4.             <li ng-repeat="n in myFavoriteWebsites">  
  5.                 {{n}}  
  6.             </li>  
  7.         </ul>  
  8.     </div>  
Now see the output below. With less lines of codes we have done this process. That is all about the ng-repeat directive. I hope you liked it.


 

When you write any code, it must be light weight and easy, efficientJ


If it is not easy, someone who looks at your code will be …..


What is controllers?

Angular JS controllers are java script object. SimpleJ . The main functionality of this object is controlling the data of our angular application. Sounds cool right?

The directive used here is ng-controller.

In the previous section we used ng-model right? We have seen an example too. Now we will reuse that example here.

The following is the example we done with ng-model

  1. Currency in INR: <input type="number" ng-model="curinr" />  
  2.   
  3. <br />  
  4.   
  5. Currency in Dollar: {{curinr*62.27}}  

No we will change it to as follows.

  1. <b>ng-Controller</b><br />  
  2.   
  3. <div >  
  4.   
  5. Currency in INR:  
  6.   
  7. <input type="number" ng-model="inrvalue" />  
  8.   
  9. <br />  
  10.   
  11. Currency in Dollar: {{inrToDollar()}}  
  12.   
  13. </div>  

In the above piece of code you can find a new directive ng-controller and I have assigned a value InrToDollar . So our next step is to create that controllerJ

We can create a controller as follows.

  1. var my = angular.module('angularBasic', []);  

Here 'angularBasic' is our application name. The complete code for creating our controller is as follows.

  1. <script>  
  2.   
  3. var my = angular.module('angularBasic', []);  
  4.   
  5. my.controller('InrToDollar', function ($scope) {  
  6.   
  7. $scope.inrToDollar = function () {  
  8.   
  9. return $scope.inrvalue * 62.27;  
  10.   
  11. }  
  12.   
  13. });  
  14.   
  15. </script>  

What is $scope in the above code block?

$scope is a part of controller. Every controller must have its own $scope object. Here what exactly our controller do is setting the behaviors on $scope.

In the above code block we used a function which returns a dollar value for the given Indian rupee. I have given the function body inside of our controller.

No what would be our output?


 

Now think if you are using normal java script and jquery for doing this task, how many lines of codes you may need to write?

Complete HTML

  1. @{  
  2.   
  3. ViewBag.Title = "Index";  
  4.   
  5. }  
  6.   
  7. <h2>Index</h2>  
  8.   
  9. <b>ng-app</b>  
  10.   
  11. <br />  
  12.   
  13. <div ng-app="angularBasic" ng-controller="InrToDollar">  
  14.   
  15. <p>My name is : {{"Please make me upper case letter".toUpperCase()}}</p>  
  16.   
  17. <p>Add me please: 2+2: {{ 2+2 }}</p>  
  18.   
  19. <b>ng-init</b><br />  
  20.   
  21. <div ng-init="myFavoriteWebsites=['http://www.c-sharpcorner.com/','http://www.codeproject.com/','http://sibeeshpassion.com/']">  
  22.   
  23. My First fav website is : {{myFavoriteWebsites[0]}}  
  24.   
  25. <br />  
  26.   
  27. My Second fav website is : {{myFavoriteWebsites[1]}}  
  28.   
  29. <br />  
  30.   
  31. My Third fav website is : {{myFavoriteWebsites[2]}}  
  32.   
  33. </div>  
  34.   
  35. <br />  
  36.   
  37. <b>ng-model</b><br />  
  38.   
  39. Currency in INR:  
  40.   
  41. <input type="number" ng-model="curinr" />  
  42.   
  43. <br />  
  44.   
  45. Currency in Dollar: {{curinr*62.27}}  
  46.   
  47. <br />  
  48.   
  49. <b>nd-repeat</b><br />  
  50.   
  51. <div ng-init="myFavoriteWebsites=['http://www.c-sharpcorner.com/','http://www.codeproject.com/','http://sibeeshpassion.com/']">  
  52.   
  53. <ul>  
  54.   
  55. My favorite websites are:  
  56.   
  57. <li ng-repeat="n in myFavoriteWebsites">{{n}}  
  58.   
  59. </li>  
  60.   
  61. </ul>  
  62.   
  63. </div>  
  64.   
  65. <b>ng-Controller</b><br />  
  66.   
  67. <div >  
  68.   
  69. Currency in INR:  
  70.   
  71. <input type="number" ng-model="inrvalue" />  
  72.   
  73. <br />  
  74.   
  75. Currency in Dollar: {{inrToDollar()}}  
  76.   
  77. </div>  
  78.   
  79.   
  80. <br />  
  81.   
  82. </div>  
  83.   
  84. <script src="~/Script/angular.min.js"></script>  
  85.   
  86. <script>  
  87.   
  88. var my = angular.module('angularBasic', []);  
  89.   
  90. my.controller('InrToDollar', function ($scope) {  
  91.   
  92. $scope.inrToDollar = function () {  
  93.   
  94. return $scope.inrvalue * 62.27;  
  95.   
  96. }  
  97.   
  98. });  
  99.   
  100. </script>  

Conclusion

Now that is all for the day, I will return with another set of items in AngularJS soon. I hope you liked this article. Please provide your valuable suggestions.


Similar Articles