AngularJS in ASP.NET

JavaScript is one of the main language in web development. There are many JavaScript libraries are currently popular in web development community. ‘AngularJS’ is one of them.

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. -– angularjs.org

We can manipulate html DOM with ‘AngularJS’ very easily and a very readable way. ‘AngularJS’ is a JavaScript MVW framework. It is an injectable and testable framework. You can read more about AngularJS here. AngularJS is open source on GitHub.

There are good examples on AngularJS website for beginners. I was trying with the most basic one on ‘ASP.NET’ and ‘Visual Studio’ today. I want to share that experience step by step with you.

Open ‘Visual Studio’ and create a new ‘ASP.NET MVC’ application. I am using ‘Visual Studio 2013’. ‘ASP.NET MVC’ application template in ‘Visual Studio 2013’ does not include ‘AngularJS’ library in project by default. So next step is I want to add this library in to my project. I am using ‘NuGet’ package manager console in ‘Visual Studio’ to add this library.

PM> Install-Package angularjs

This adds ‘AngularJS 1.4.8’ into my ‘ASP.NET MVC’ project. Now I am going to https://angularjs.org/ for some very basic examples to try.

First in the _Layout.cshtml, I am adding ng-app in the head tag.

<html ng-app>;

</html>;

I have added a new bundle for ‘AngularJS’ in ‘BundleConfig.cs’

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
             "~/Scripts/angular.min.js"));

and add that in to the ‘body’ section of _Layout.cshtml.

@Scripts.Render("~/bundles/angular")

Then I am adding a new ‘Controller’ with name AngularDemo (you can give any name of your choise).

public class AngularDemoController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Add a new view for the ‘Index’ action method. The name of the view is index. Inside this view I am adding some html with ‘AngularJS’ special syntax.

<label>Name:</label>
<input type="text" ng-model="yourName"; placeholder="Enter a name here">
<hr />
<h1>Hello {{yourName}}</h1>

I am done. I am hitting F5 to run the project and test it in web browser. I am writing the address of the new controller in browser and hit enter, it shows a new textbox and a heading with ‘hello’.

http://localhost:%5Bportnumber%5D/AngularDemo/index

When I start writing on the textbox it starts showing the text immediately in the below heading with hello greeting! So easy and natural syntax of doing dynamic work with ‘html’ and ‘AngularJS’. The same thing I can do with ‘jQuery’ but with lot more coding. ‘AngularJS’ save my time.

AngularJS Demo

This is a very basic demo with ‘AngularJS’ and ‘ASP.NET’. I am looking to learn more on ‘AngularJS’.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s