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/


If you enjoyed this article, get email updates (it's free).


Related Articles
  • Creating ASP.NET MVC 4 web application with Empty project templateThis article will show you how to start building ASP.NET MVC 4 web application with Empty project template. Empty project template is basic ASP.NET MVC website generating no code and providing you with nothing to start with. Adding a Model, View & Controller with Empty project template helps you to understand quite clearly than starts with Internet Application template.
  • Introduction to ASP.NET MVCASP.NET MVC provides an alternative approach to traditional ASP.NET web development often referred to as web forms by applying an architectural approach. The MVC or Model-View-Controller pattern splits an application into three separate and distinct layers, the Model layer, the View layer and the Controller layer, each with a very specific set of responsibilities
  • Dynamic Accordion menu or Vertical menu using jQuery in ASP.NET MVCNavigation menu is most important in any web applications. While developing web applications, I used to create stuff more interactive by using jQuery and CSS. It’s quite different to create dynamic navigation menu in ASP.NET MVC. Whether it’s a horizontal or vertical menu, the idea remains same. This article will show you how to create jQuery Accordion menu dynamically in ASP.NET MVC web applicati...
  • Adding a Controller in ASP.NET MVC 4This article will show you how to create a Controller in ASP.NET MVC 4 application. This Controller Layer is the responsible for controlling the application flow and interaction between the Model and the View. Controllers are the brains of an ASP.NET MVC application, requesting data from the Model layer and choosing the correct method of getting that data to the user.
  • Getting started with ASP.NET MVC 5 and AngularJS 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.
  • CRUD operation in ASP.NET MVC using Web API and AngularJS AngularJS is a powerful Javascript framework for dynamic web applications. We often use AngularJS to develop single page application. Here we will explore how to create CRUD (Create Read Update Delete) operation in ASP.NET MVC using Web API and AngularJS.
  • Getting started with ASP.NET MVC 4 I hope you are getting excited to start building ASP.NET MVC 4 application. Visual Studio 2012 IDE is used to build MVC 4 application, also you can install MVC 4 components for Visual Studio 2010. This article will show you that how to start building your first ASP.NET MVC 4 application with internet application template.

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox