I am sure by now you might be already hearing the buzz word: AngularJS. Some might be also thinking along the lines like already so many good open source client side libraries and frameworks are available– jquery, knockout.js, backbone.js, spine.js, moustache.js, ember.js etc.-then why another framework? Here we will introduce you to AngularJS.
Introduction
In my last article we had a formal introduction about AngularJS world. In this article let us wet our appetite for AngularJS with some coding.
Hello World Sample
Ok so now without wasting any time further we will start with a nice Hello World program. Everyone by now is anxious enough to see how the Hello World program works. Here the sample we are going to discuss is developed using Visual Studio 2012. But you can use Visual Studio 2010 also.
Open Visual Studio 2012 and select ASP.NET MVC4 (Internet template).
Please make sure that you should see same code structure as shown in above figure. The next step is to add the AngularJS to the above project. Well there are lot of ways to add AngularJS to the project, but recommended way is to go with NuGet. Really it is very handy tool to manage the required dependencies.
Please refer below figure for adding the AngularJS using NuGet
Once you are done with the installation process, please navigate to the Solution Explorer->Scripts folder and make sure that the AngularJS files are added and you should see same code structure as shown in below figure.
Open the BundleConfig.cs present within App_Start folder and add the following code snippet:
//Add the angular components
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.*"));
Add reference to the AngularJS in the _Layout.cshtml file present within Views->Shared folder
@Scripts.Render("~/bundles/angular")
Navigate to the HomeController.cs page and add a new method: HelloAngularJS as mentioned below:
public ActionResult HelloAngularJS()
{
return View();
}
Add view: HelloAngularJS.cshtml and select _Layout.cshtml page as shown in the screenshot below:
Now we are done with setting up the AngularJS within the project.
Update the View: HelloAngularJS.cshtml with the following code snippet:
Press F5 by setting chrome as your default browser and navigate to the action method: HelloAngularJS.
In order to see the magic, enter some text in the textbox and see how the value after the word Hello changes?.
You may notice that until now we have not written any code. From the past experience in order to establish the same functionality we had to write a lot of code.
In order to establish the above functionality using javascript /jquery we have to do the following steps:
- Intercept the keydown event
- Fetch the textbox value
- Update the label value with the textbox value.
Thank God ? now with AngularJS, we have to do nothing and achieve the functionality. Well this is a tip of the iceberg. We can achieve lot of cool features with less coding and which in turn boosts up the application performance.
Now let us revisit the code snippet described in the Figure 6 step by step. In the code snippet, I have added few AngularJS related tags. These tags seem to be new for you, but you will be comfortable with these tags once you start using them in development of the applications.
- data-ng-app: You can specify ng-app also instead of data-ng-app. The reason for opting data-ng-app is to leverage the HTML5 data-* attributes. The word ng is shortcut notation of AngularJS. data-ng-app directs the Angular to be active within the div section of the page. If you want Angular to be active throughout the entire page then just annotate the HTML tag present within the _Layout.cshtml file present within Views->Shared folder.
<html lang="en" data-ng-app>
This shows how flexible is AngularJS. Let say you are already using other framework/library like knockout.js, backbone.js, jquery in the page. Still you will have no issues if you properly specify the attribute data-ng-app in the page.
- data-ng-model: We have specified this attribute in the textbox. This attribute forms the glue to bind the state of textbox with the model (i.e. in our case yourname).On change of the textbox value Angular will automatically trigger a change to update the model yourname with the textbox value. Similarly if we update the model yourname than Angular will update the textbox value. This is called Two way databinding. This is one of the core features of the AngularJS.
- model (yourname): In the sample code we are binding the <h1> tag with the directive template called {{ yourname }}. Using the model and curly braces AngularJS binds the model value to the <h1> tag.
Hence any change in yourname model value changes the text inside <h1> tag.
Conclusion
Okay, by now we have seen how easy it is create a dynamic application without any javascript coding. But in case we are building a complex application we have to write code. Hope you enjoyed reading the article. Thank you.
Reference