Geeks With Blogs
Doug.Instance Improving the world one post at a time

In my previous post, I outlined a general structure for setting up an application using node.js and other open tools in Visual Studio Express.  Now I would like to expand this to show how I would host the angular-seed starter application for AngularJS.  If you aren’t familiar with AngularJS or the seed app, you might want to take a look before continuing because I am going to assume you are already familiar with both.

First, I used the same File->New Project setup in my previous post creating a new solution, empty web application with MVC and Web API, and unit tests.  Then I set my web application as my StartUp project.  The resulting solution explorer looks like this:

image

In my previous post, I added a blank web site.  In this case, we want to use the angular-seed project so I extracted its contents to my solution folder:

image

Note that I don’t plan on contributing to the angular-seed project.  I am simply going to use it for a new application hosted in an ASP.Net MVC application so I downloaded the source as a zip rather than cloning the git repository.  If this were a project I planned on contributing to, I would clone the repository and leave the file structure unchanged.  Since I am building a new application, I would like my file structure to be “clean” so I am going to move all of these files into my web application project folder and add them to my project.  Then add the “app” and “e2e-tests” folder as existing web sites.  The resulting solution looks like this:

image

Before I start building the seed app in VS, lets install all of the components and take a look under the hood.  Assuming you have node.js installed, all  you have to do is navigate to the web application folder in your git bash and type “npm install”.  Note that this install uses bower to install components so you will need to have git installed so bower can retrieve the components.  Once the install completes, you can actually just run the angular app as-is from your “app” web site.  Just select the “Index.html” file, right click, and select “View in Browser”.  You may also want to refresh your app web site (right-click->Refresh Folder) so you can see the files added by the npm install.

image

Now that we have the app working the “angular way” (for the most part), let’s take a closer look at the CSS and JavaScript references in index.html.  First let’s look at the top of the file.

<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>

The first 2 CSS files are part of the html5-boilerplate project.  The normalize.css file helps resolve differences between browsers and main.css provides some html5 best practices.  The app.css is the CSS for your aplication.  The last file, modernizr-2.6.2.min.js adds support for some html5 features to older browsers.

Now let’s look at the bottom of the file.

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>

The commented out script and first 2 scripts are angular.  In this case we are only including the angular core and angular routing module.  The rest of the JavaScript files are sample files for your application.

Since part of my objective is to do this the “Visual Studio” way, now we will start using Visual Studio in a more standard fashion by installing some of these JavaScript files as NuGet packages.  Let’s make sure we have selected the web application project and install the angular core and route modules and modernizr:

image

PM> Install-Package AngularJS.Route

PM> Install-Package modernizr

We should now see these files in the “scripts” folder in our web project:

image

We also need our CSS so let’s create a “Content” folder and copy our “main.css” and “normalize.css” from bower_components/html5-boilerplate/css/ into it:

image

 

Now we can build a controller and view to duplicate the index.html content Visual Studio style.  Let’s start with an empty controller called HomeController:

image

image

Then add a view called “Index” to the Views\Home folder.  Add a standard razor MVC view (in this case I am using MVC 5) without a layout.  The reason we are not using a layout is because we are building an AngularJS single page app (SPA) and this is our single page.  Simply copy and paste the contents of the angular-seed index.html file in your app web site into the Index.cshtml view page we just created.  To get things working quickly, we will simply point all of our script and CSS references to the correct locations first at the top of Index.cshtml:

<link rel="stylesheet" href="~/Content/normalize.css"/>
<link rel="stylesheet" href="~/Content/main.css"/>
<link rel="stylesheet" href="~/app/app.css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>

Then at the bottom:

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/view1/view1.js"></script>
<script src="~/app/view2/view2.js"></script>
<script src="~/app/components/version/version.js"></script>
<script src="~/app/components/version/version-directive.js"></script>
<script src="~/app/components/version/interpolate-filter.js"></script>

Note that since Razor 2 and MVC 4, it is no longer required to use @Url.Content to map paths relative to the application root and we can simply use the tilde at the front of the URL.

The last thing we need to do to get the application running again is to change our routing to include the “app” folder in the path to our views in view1/view1.js and view2/view2.js:

$routeProvider.when('/view1', {
  templateUrl: 'app/view1/view1.html',
  controller: 'View1Ctrl'
});

$routeProvider.when('/view2', {
  templateUrl: 'app/view2/view2.html',
  controller: 'View2Ctrl'
});

Before running our app, let’s modify the application properties to change start action from “Current Page” to “Specific Page” to make sure the default URL is the root of the web site:

image

There is one other piece of MVC goodness we will add to our Index.cshtml view and it will go inside the <head> tag:

<base href="@Url.Content("~")" />

In this case we DO need to use Url.Content because unfortunately Razor does not resolve the URL unless the tilde is a prefix.  When it is the only content of the href attribute, it does not get resolved to the correct path.  Now if you host your application in a different path other than the root of your web site, angular will automatically find files based on relatives paths from this “base” URL.

Now we can run our MVC application with the same results:

image

One piece of this equation is still missing which is the publication of this web site will not include our angular code and angular view files under the current configuration.  This setup is only intended for local development.  In a future post, I will cover using open source tools to compile your angular app for deployment.

Posted on Wednesday, October 8, 2014 9:43 PM | Back to top


Comments on this post: Setting up AngularJS with Visual Studio Express 2013 for Web

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Doug Lampe | Powered by: GeeksWithBlogs.net