AngularJS: Tutorial 1

adityaswami89

Rate me:

5.00/5 (5 votes)

25 Dec 2015CPOL2 min read

19.5K

AngularJS: Tutorial 1

Article Series

Tutorial 1: Angular JS
Tutorial 2: Controllers
Tutorial 3: Controllers
Tutorial 4: Controllers : Advanced
Tutorial 5: Models
Tutorial 6: Services

This is the first tutorial among many to come on learning Angular JS. Since I am a .NET developer, I go on to use Visual Studio code as it is lightweight and suits web development environment.

Visual Studio code can be downloaded here.

You could still code with any of the available IDEs like Eclipse, Webstorm, and Sublime, etc.

Now what is Angular JS: It is a super heroic JavaScript framework by Google.

It is very lightweight.
Supports Single Page Application development. Which means only the first time the entire page is loaded fully, and subsequent request would load only the part in the page that has to change, thus making it very fast and responsive.
Supports MVVM Architecture (liked by most .NET developers) thus helps in organizing JS code which otherwise is a total mess.

Simple, right? No, we will look at a traditional page request vs Angular JS page request.

Traditional

Angular JS: With Angular JS, the first part remains the same, i.e., URL request to Webserver and then the Webserver returns the Webpage and its Resources and then the browser loads the HTML page .

But what happens differently is the 2^nd time when a user performs an action, JSON data is returned from the web server and it is loaded into the existing HTML page (loaded already).

We will understand the page life cycle of AngularJS after we understand some basics of Angular.

So we move on to create our first AngularJS application:

First, for people using Visual Studio code, you need to create a page and then configure Task Runner to run that page. That can be done as below.
Use Ctrl+Shift+p to find Configure Task Runner. Change the parameters in tasks.json:

JavaScript
```
{
"version": "0.1.0",
 
"command": "explorer",
 
"windows": {
"command": "explorer.exe"
},
 
"args": ["Day1.html"]
}
```

Now you can write the code as below:

HTML

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body >
<h1>Hello {{name}}</h1>
<input type="text" ng-model="name"/>
 
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">
 </script>
</html>

Note here: The source in the script tag has been taken from the Angular URL (https://angularjs.org/) and then click on download and then get the CDN part of it.

After we have the Angular URL in our script tag, we need to include “ng-app” in the main tag. And then, I have created an input tag with binds with name property and we can use this by referring to it like :“{{ PropertyName }}” .

So in this tutorial, we saw what is AngularJS and how to create our first Angular JS application.

This article was originally posted at https://adityaswami89.wordpress.com/2015/08/03/angularjs-tutorial-1

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

adityaswami89

Software Developer (Senior)

India

Passionate about Microsoft Technologies like WPF, Windows Azure, ASP.NET, Win Phone and also on Cross platform Mobile Apps, Mongo DB's, IOT & WOT. I love learning and working with (or) Creating Design Patterns . Writer | Technology Evangelist | Technology Lover | Microsoft Developer Guidance Advisory Council Member | Cisco Champion | Speaker |

Blog : http://adityaswami89.wordpress.com/

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

AngularJS: Tutorial 1

Article Series

Traditional

License

Comments and Discussions