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.
This is a very basic demo with ‘AngularJS’ and ‘ASP.NET’. I am looking to learn more on ‘AngularJS’.
Arnab's blog 