Introduction

AngularJS the way I learned, I thought to share with the audience who are searching for learning AngularJS in a simplified way. This article is for them.

Here's the flow of this article which we will get into step by step. Firstly, we will pick with what & why.

What is AngularJS?

Why named AngularJS?

Why another JavaScript framework? JQuery VS Angular.

We will differentiate them with an example.

Download & Install AngularJS Library in Visual Studio 2015.

Start AngularJS with Visual Studio.

We will submit a form with AngularJS.

About Form State

Send form data to MVC Controller.

Make URL (# free) in AngularJS.

Ok, let's get started. Before we focus on any topic let's know what is AngularJS.

What is AngularJS

AngularJS is a client-side JavaScript MVC-Based framework. It is Open source, supported & maintained by Google. AngularJS as “Angular” or “Angular.js” was initially released in 2009, which goal to enhanced the development process and testing.

Why named AngularJS

We know HTML that is contained (eg: <html>) with angle brackets(<>) thus the name[according to FAQ] came "Angular". AngularJS uses directives like ng-app, ng-model that prefixed with "ng"(base directive) which bring to mind "Angular".

Why another JavaScript framework

Both are purposed to client-side scripting, but AngularJS simply offers more features and advantages. As we know that AngularJS is MVC-Based framework which is modular and reusable.

Download & Install AngularJS Library in Visual Studio 2015

Click on the Download link to download the latest version of AngularJS library. AngularJS with Visual Studio

Let’s open Visual Studio 2015(IDE) click: File, New, Project and then the new window will appear like the following image:

Figure 1.0

Click on ASP.NET Web Application, rename the application and hit “ok” button at bottom right. Choose empty template in next window and click on “ok” button. It will take a while to load a sample empty project.

Now the first thing we need to do is register AngularJS.Core in this application. We need to get reference from NuGet.

To do that right click on project name and click on “Manage NuGet Packages” like the following image.

Figure 1.1

And in next window browse searching “Angular” and install the updated version of AngularJS.Core like the following image:

Figure 1.2

Or click on Tools, NuGet Package Manager, then Package Manager Console and write Install-Package AngularJS.Core, also we need to add jQuery library in our project like below:

Figure 1.3

Our Installation process is done. Now test it with our previous AngularJS code in comparison with jQuery section.

Let’s add a new HTML page and name it “Index”.

Figure 1.4

Code in Index.html

<body ng-app> First Name:

<input type="text" ng-model="fname" />

<br/> Last Name:

<input type="text" ng-model="lname" />

<br/> Result: {{fname+''+lname}} </body>

</html>

<script src="Scripts/angular.min.js">

</script>

Notice that the above example is a simple HTML code, but there are some new unknown attributes and braces.

The new attributes "ng-app", "ng-model" are AngularJS directives, and the "{{}}" is expression. Later we will discuss about those.

Well, what is AngularJS directives? AngularJS directives extends the HTML attributes with the prefix "ng".

Let’s add a new MVC empty project to work with form and later we will send the data to Controller. To do that right click on the existing solution, click: File, New, then Project and name it “AngularJSForm“.

Let’s put a breakpoint on CreateCustomer() method in HomeController and run it, after submitting the form it’ll hit the breakpoint.

Figure 1.7

In debug mode we can see the model is populated with form data, which we can send it to database & save the data.

Output:

Output is same as before.

Code Explanation

In the above example of sending form data to Controller we have used $http service. Well then what are those?

Service: AngularJS services are JavaScript functions to relate with the controller, model or custom directives. AngularJS also have other useful services like $interval, $window, $log. To know more about services click here.

$http service: We can use $http service to send an AJAX request. In this example we have sent Http POST request to the remote server to submit the data.

Make URL HashTag(#) free in AngularJS

Next we will redirect to new URL after form submission using $location service. Using $location service AngularJS add ‘#’ to the url which prevent to redirect to a desired url.