Home About Me Contact

Setting up AngularJS in Visual Studio 2013 with TypeScript


In this post I'm going to show you the way that I've come to develop AngularJS applications in Visual Studio in conjunction with TypeScript and ASP.NET MVC. When I searched around for how to do this, I wanted a way to have VS automatically stitch together all of the javascript without having to use something like RequireJS. Which as it turns out, is not hard to do. This meant having my TypeScript files all split out logically into different folders for controllers, directives, services and filters. As well as having one file per controller and etc (While not necessary, eases the part of me that likes to have a place for everything and have everything in its place).

So first off, what you're going to need to do is create a new ASP.NET MVC project using the "Basic" template. Create a HomeController and view for the Index method and make sure that all works nicely.

Using NuGet, go ahead and grab the AngularJS and angularjs.TypeScript.DefinitelyTyped packages. This will dump a bunch of scripts into the Scripts folder, not all of which are necessary... I just tend to add them in whenever I need them. Add in the AngularJS reference to BundleConfig.cs as needed and get it included in _Layout.html. Add the ng-app directive anywhere you want the AngularJS application to be scoped to. For me, I just use the root HTML tag.

In your Scripts folder, create a new TypeScript file. Name it whatever you want, this will be where AngularJS gets initiated from. For this tutorial i'll be using the name AngularDemo, so I'll be creating AngularDemo.ts. You'll need to add in the reference comment to load in the AngularJS typings and then go about creating the Angular application instance.

So at this point you really don't have much. Basic MVC, AngularJS being included and ... Well that's about it. This next step will get VS ready to stitch together all your TypeScript files so our entire application runs under a single JavaScript file despite having our TypeScript logically split up into different files.

Go to your project properties page (Project > "ProjectName" Properties...) and load up the "TypeScript Build" section. Under "Output", check "Combine JavaScript output into file", set the textbox to "Scripts/AngularDemo.js" (Or whatever you want... I'm not picky) and hit Ctrl+S to save it.

Obviously you wont see the effects of this so far since we only have the one TypeScript file, so lets add in a new TypeScript file for a basic controller. Like everything else, you can add these wherever you want, but I'll be using "Scripts/ng/controllers/TestController.ts". Using the code below, I've created a basic controller. The $scope gets passed in as a ITestControllerScope which extends ng.IScope, this allows our scopes to be type safe and fully defined.

Now due to the TypeScript build settings we added previously, the AngularDemo.js file now contains the JavaScript output for both the main TypeScript file as well as the controller we've created. All of our TypeScript is being automatically concatenated into a single output file. Just add in some HTML to make use of the controller and now you can see everything coming to life in the browser.

That's really all there is to the actual setup of AngularJS in Visual Studio using TypeScript. This is really just scratching the surface of what is required to build full applications with these technologies. In the next post I'll be writing about AngularJS routing and serving templates for AngularJS to use via ASP.NET MVC.

Home

profile for Thomas Stiegler at Stack Overflow, Q&A for professional and enthusiast programmers

View Thomas Stiegler's profile on LinkedIn