Angular JS in Visual Studio 2013

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

6 thoughts on “Angular JS in Visual Studio 2013

  1. Hello Mr Isham

    Thank you for your information regarding using Visual Studio -2013 for AngularJS. I also got the similar error “Note : If you get any 404 error page, please re-run the project.”. The page get displayed correctly, if I go back to home-page.

    After trying so many unsuccessful installation attempt for “Yeoman”. I decided to try Visual-Studio and luckily for me, when I was looking for solution, yours was the first on the list.

    Thanks again.

    Tony

  2. Hello Mr Isham M Iqbal

    Thank you very much for your help. I was disable to run Angular js before getting information from you. Now I have run it successfully.

    Thanks More
    Rana

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