Angular JS is abbreviated as “Angular JavaScript “. Which is developed by the google. Angular JS is open source, means we can get it easily.
Angular JS can be used with HTML also means we can add it on HTML page with the <Script> tag. Angular JS is a framework which library written in JavaScript. Angular JS 1.0 version is released in 2012.
For creating a simple application in Angular JS you can use CDN file , following is the CDN link for the angular JS
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
|
Angular JS is very useful for making the single page application, in present many company are using angular JS for creating the application.
Advantages of using the Angular JS
1. Mainly the use of angular JS is that it is used to create the single page application.
2. It can prevent from the dependency injection.
3. One of the most feature or advantage of using Angular JS is that it provides the facility of Two-Way data binding means it keep connected data and model so any changes we can make data and it will update the model.
4. For testing purpose it is more good, basically angular JS is designed in way of testing, so for unit testing purpose it is nice.
5. Working with angular JS for developers, it gives many features with less work.
6. We can create a Angular JS application with the MVC way.
Disadvantages of using the Angular JS
1. An Application with Angular JS is not a secured application, for making secure your application you need to put Authentication and authorization on server side.
Basic Component For the Angular JS applicaiton
1. ng-app :- It is directive ,there are many directive in angular JS, Directive means that bind the Angular JS Application with the HTML. Here ng means that it is belong to the angular JS. An application where are using the angular JS, first it find the “ng-app” on the page after that it work for all the section where this page find the directive. This ng-app is placed at the <HTML ng-app> tag level or the <Body ng-App> tag level so that it available for the entire page.
2. Ng-model:- :- It bind the Angular JS Application data to the HTML controls.
3. Ng-Bind :- It is used to bind the application data to the HTML tag.
How to download the angular JS Script.
1. We can use Angular JS CDN Link to the page
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
|
2. We can download the angular JS script file from the following URL
Go to the URL and click on the download angular JS
When you will click on the download Angular JS then new window will open there you can see CDN link also beside this CDN link you will see the question(?) for showing the advantage of using the CDN link there are the following advantage of using the CDN given by the google
Why Google CDN?
- Better Caching : If you host AngularJS yourself, your users will have to download the source code atleast once. But if the browser sees that you are referring to Google CDN's version of AngularJS, and your user has visited another app which uses AngularJS, then he can avail the benefits of caching, and thus reduce one download, speeding up his overall experience!
- Decreased Latency : Google's CDN distributes your static content across the globe, in various diverse, physical locations. It increases the odds that the user gets a version of AngularJS served from a location near him, thus reducing overall latency.
- Increased Parallelism : Using Google's CDN reduces one request to your domain. Depending on the browser, the number of parallel requests it can make to a domain is restricted (as low as 2 in IE 7). So it can make a gigantic difference in loading times for users of those browsers.
Now download the angular JS Script file
So now let’s we will understand this angular JS with a simple example.
Angualr JS use double curly braces “ {{ }} “ for showing the binding expression
1. Go to your visual studio and add a new project then select a empty template.
2. Now add a folder to your application and paste angular JS Script. And give the folder name as Scripts.
3. Now right click on your application and add a HTML page.
4. Drag and drop angular JS Script to HTML page in head section .
5. Now add the ng-app directive to the HTML tag or body tag to that it is available through the page.
Now write the following code and run your application and see the output in different cases.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Applicaiton</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div>
<label>
Sum of 10 + 30 = {{10+30}}
</label>
</div>
<div>
<label style="font-variant:normal" >
Sum of 20+40 ={{20+40}}
</label>
</div>
</body>
</html>
|
Output is
Sum of 10 + 30 = 40
Sum of 20+40 =60
|
output is
Second case
<!DOCTYPE html>
<html >
<head>
<title>Angular Applicaiton</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div ng-app>
<label>
Sum of 10 + 30 = {{10+30}}
</label>
</div>
<div>
<label style="font-variant:normal" >
Sum of 20+40 ={{20+40}}
</label>
</div>
</body>
</html>
|
Output is
Sum of 10 + 30 = 40
Sum of 20+40 ={{20+40}}
|
For Next case add another div and write the following code
<div ng-app="" ng-init="myColor='lightblue'">
<label> TextBox background : write color name on text box and see the output
<input style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}">
</label>
</div>
|
OutPut is
EmoticonEmoticon