Angular JS is the topic for a couple of years when it comes to single page web applications development. This framework is super cool. If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.

I am not covering about the INTRO TO ANGULAR JS here but how to getting started with Angular JS in Visual Studio 2013.

At first my assumption is your computer is a Visual Studio 2013 Update 3 ready one.

Before we start, lets download Web Essentials 2013 for Update 3 from here, this is a very cool tool for web development with Visual Studio, and has support for VS 2012 and VS 2010. I am mainly using this here for the intellisence support. Because intellisense in Angular will just enable to deliver your app quickly but nothing.

Screenshot (183)

First go here and download AngularJS SPA Template, this is a project skeleton of a simple single-page web application (SPA) built with AngularJS, Bootstrap and ASP.NET. This is a port of the official Angular Seed project, but optimized for the Visual Studio development environment.

Once you install this .vsix file, open Visual Studio 2013, create new project

Screenshot (184)

You can notice, a new template is come under ‘Web’ with the name of ‘AngularJS SPA Template’ select it and this is what we have installed before. Name it as ‘Angular Hello World’ and click OK.

This package needs Nuget dependencies to be solved so, open Nuget Package Manager Console, you will automatically see the below message

Screenshot (185)

Click “Restore” button and wait for dependencies to be resolved.

Now we have successfully setup a basic Angular JS project in Visual Studio 2013. You can see several files and folders in the solution explorer.

In solution explorer, open Views -> Index.cshtml, as this is the index file of the project. That file will be like below

@{
    PageData["title"] = "AngularJS SPA Template for Visual Studio";
}
<h2>Welcome!</h2>
<p>This is just a demo page.</p>

Now add

<input type="text" ng-model="name">
<h2> Welcome {{name}} </h2>

so the final app will be

@{
    PageData["title"] = "AngularJS SPA Template for Visual Studio";
}
<h2>Welcome!</h2>
<p>This is just a demo page.</p>
<input type="text" ng-model="name">
<h2> Welcome {{name}} </h2>

and yes, we are done, we have successfully setup the famous hello world app in Angular JS with Visual Studio 2013.

Lets run it, to check the results

Screenshot (186)

Note : If you get any 404 error page, please re-run the project.

HAPPY CODING FOLKS 🙂

Advertisements