AngularJS is a powerful javascript
framework for dynamic web applications. It is fully extensible for works well
with other libraries. The resulting environment is expressive, readable and
easy to develop.
Advantages of using AngularJS
AngularJS provides a lot of features
that we don’t get with using other libraries
1.It provides structure to javascript
2.Two way data binding
3.Templating
4.Deep linking for dynamic pages
5.Form validation
6.Localisation
7.MVC pattern support
This article explains how to use
AngularJS in ASP.NET MVC 5. Here I’m going to start with creating ASP.NET web
application with empty project template.
1.Go to File->New->Project and
select ASP.NET web application
2.In ASP.NET project window select
empty project template, then “under Add folder and code reference for” check
the MVC checkbox.
3.Now our empty ASP.NET MVC 5 project
is created
4. Let’s create controller in our
project. Right click on the Controller folder and select Add Controller.
Here one thing you should remember that
all Controllers must be named by using “Controller” suffix. In this example I’m
going to name our new Controller as “HomeController”
Now you can see the HomeController.cs
file in the Controller folder. Please read this article to know more
about Controller
Adding a Controller in ASP.NET
5.Open the HomeController.cs file and
you will see the following code.
6.Right click on the Index method
and select Add View
Note: In under the options uncheck the
“Use a layout page”
7.In the Views folder Home folder has
been created along with index.cshtml file. Double click the index.cshtml file
and add any text between <div> tags.
8. To run the application press Cnrl+F5
As we have running ASP.NET MVC 5
application our next step is to install AngularJS in our project.
9.Go to Tools ->NuGet Package
Manager and select Package Manager Console
10.In the Package Manager Console write
command “Install-Package AngularJS”
When the installation is completed you
will see the success message in the console.
11.Open the index.cshtml file and
include AngularJS library from Script folder which is created during the
AngularJS package installation.
12. Add the following code in the
<div> tag to ensure that AngularJS is working in our application.
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
13.Press Ctrl+F5 to run the application
Please follow the link to read about ng
directive components of AngularJS
https://docs.angularjs.org/api/ng/directive/