Host AngularJS (Html5Mode) in ASP.NET vNext
- by Shaun
Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/06/10/host-angularjs-html5mode-in-asp.net-vnext.aspxMicrosoft had announced ASP.NET vNext in BUILD and TechED recently and as a developer, I found that we can add features into one ASP.NET vNext application such as MVC, WebAPI, SignalR, etc.. Also it's cross platform which means I can host ASP.NET on Windows, Linux and OS X. If you are following my blog you should knew that I'm currently working on a project which uses ASP.NET WebAPI, SignalR and AngularJS. Currently the AngularJS part is hosted by Express in Node.js while WebAPI and SignalR are hosted in ASP.NET. I was looking for a solution to host all of them in one platform so that my SignalR can utilize WebSocket. Currently AngularJS and SignalR are hosted in the same domain but different port so it has to use ServerSendEvent. It can be upgraded to WebSocket if I host both of them in the same port. Host AngularJS in ASP.NET vNext Static File Middleware ASP.NET vNext utilizes middleware pattern to register feature it uses, which is very similar as Express in Node.js. Since AngularJS is a pure client side framework in theory what I need to do is to use ASP.NET vNext as a static file server. This is very easy as there's a build-in middleware shipped alone with ASP.NET vNext. Assuming I have "index.html" as below. 1: <html data-ng-app="demo">
2: <head>
3: <script type="text/javascript" src="angular.js" />
4: <script type="text/javascript" src="angular-ui-router.js" />
5: <script type="text/javascript" src="app.js" />
6: </head>
7: <body>
8: <h1>ASP.NET vNext with AngularJS</h1>
9: <div>
10: <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> |
11: <a href="javascript:void(0)" data-ui-sref="view2">View 2</a>
12: </div>
13: <div data-ui-view></div>
14: </body>
15: </html>
And the AngularJS JavaScript file as below. Notices that I have two views which only contains one line literal indicates the view name.
1: 'use strict';
2:
3: var app = angular.module('demo', ['ui.router']);
4:
5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
6: $stateProvider.state('view1', {
7: url: '/view1',
8: templateUrl: 'view1.html',
9: controller: 'View1Ctrl' });
10:
11: $stateProvider.state('view2', {
12: url: '/view2',
13: templateUrl: 'view2.html',
14: controller: 'View2Ctrl' });
15: }]);
16:
17: app.controller('View1Ctrl', function ($scope) {
18: });
19:
20: app.controller('View2Ctrl', function ($scope) {
21: });
All AngularJS files are located in "app" folder and my ASP.NET vNext files are besides it. The "project.json" contains all dependencies I need to host static file server.
1: {
2: "dependencies": {
3: "Helios" : "0.1-alpha-*",
4: "Microsoft.AspNet.FileSystems": "0.1-alpha-*",
5: "Microsoft.AspNet.Http": "0.1-alpha-*",
6: "Microsoft.AspNet.StaticFiles": "0.1-alpha-*",
7: "Microsoft.AspNet.Hosting": "0.1-alpha-*",
8: "Microsoft.AspNet.Server.WebListener": "0.1-alpha-*"
9: },
10: "commands": {
11: "web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:22222"
12: },
13: "configurations" : {
14: "net45" : {
15: },
16: "k10" : {
17: "System.Diagnostics.Contracts": "4.0.0.0",
18: "System.Security.Claims" : "0.1-alpha-*"
19: }
20: }
21: }
Below is "Startup.cs" which is the entry file of my ASP.NET vNext. What I need to do is to let my application use FileServerMiddleware.
1: using System;
2: using Microsoft.AspNet.Builder;
3: using Microsoft.AspNet.FileSystems;
4: using Microsoft.AspNet.StaticFiles;
5:
6: namespace Shaun.AspNet.Plugins.AngularServer.Demo
7: {
8: public class Startup
9: {
10: public void Configure(IBuilder app)
11: {
12: app.UseFileServer(new FileServerOptions() {
13: EnableDirectoryBrowsing = true,
14: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app"))
15: });
16: }
17: }
18: }
Next, I need to create "NuGet.Config" file in the PARENT folder so that when I run "kpm restore" command later it can find ASP.NET vNext NuGet package successfully.
1: <?xml version="1.0" encoding="utf-8"?>
2: <configuration>
3: <packageSources>
4: <add key="AspNetVNext" value="https://www.myget.org/F/aspnetvnext/api/v2" />
5: <add key="NuGet.org" value="https://nuget.org/api/v2/" />
6: </packageSources>
7: <packageSourceCredentials>
8: <AspNetVNext>
9: <add key="Username" value="aspnetreadonly" />
10: <add key="ClearTextPassword" value="4d8a2d9c-7b80-4162-9978-47e918c9658c" />
11: </AspNetVNext>
12: </packageSourceCredentials>
13: </configuration>
Now I need to run "kpm restore" to resolve all dependencies of my application.
Finally, use "k web" to start the application which will be a static file server on "app" sub folder in the local 22222 port.
Support AngularJS Html5Mode
AngularJS works well in previous demo. But you will note that there is a "#" in the browser address. This is because by default AngularJS adds "#" next to its entry page so ensure all request will be handled by this entry page.
For example, in this case my entry page is "index.html", so when I clicked "View 1" in the page the address will be changed to "/#/view1" which means it still tell the web server I'm still looking for "index.html".
This works, but makes the address looks ugly. Hence AngularJS introduces a feature called Html5Mode, which will get rid off the annoying "#" from the address bar. Below is the "app.js" with Html5Mode enabled, just one line of code.
1: 'use strict';
2:
3: var app = angular.module('demo', ['ui.router']);
4:
5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
6: $stateProvider.state('view1', {
7: url: '/view1',
8: templateUrl: 'view1.html',
9: controller: 'View1Ctrl' });
10:
11: $stateProvider.state('view2', {
12: url: '/view2',
13: templateUrl: 'view2.html',
14: controller: 'View2Ctrl' });
15:
16: // enable html5mode
17: $locationProvider.html5Mode(true);
18: }]);
19:
20: app.controller('View1Ctrl', function ($scope) {
21: });
22:
23: app.controller('View2Ctrl', function ($scope) {
24: });
Then let's went to the root path of our website and click "View 1" you will see there's no "#" in the address.
But the problem is, if we hit F5 the browser will be turn to blank. This is because in this mode the browser told the web server I want static file named "view1" but there's no file on the server. So underlying our web server, which is built by ASP.NET vNext, responded 404.
To fix this problem we need to create our own ASP.NET vNext middleware. What it needs to do is firstly try to respond the static file request with the default StaticFileMiddleware. If the response status code was 404 then change the request path value to the entry page and try again.
1: public class AngularServerMiddleware
2: {
3: private readonly AngularServerOptions _options;
4: private readonly RequestDelegate _next;
5: private readonly StaticFileMiddleware _innerMiddleware;
6:
7: public AngularServerMiddleware(RequestDelegate next, AngularServerOptions options)
8: {
9: _next = next;
10: _options = options;
11:
12: _innerMiddleware = new StaticFileMiddleware(next, options.FileServerOptions.StaticFileOptions);
13: }
14:
15: public async Task Invoke(HttpContext context)
16: {
17: // try to resolve the request with default static file middleware
18: await _innerMiddleware.Invoke(context);
19: Console.WriteLine(context.Request.Path + ": " + context.Response.StatusCode);
20: // route to root path if the status code is 404
21: // and need support angular html5mode
22: if (context.Response.StatusCode == 404 && _options.Html5Mode)
23: {
24: context.Request.Path = _options.EntryPath;
25: await _innerMiddleware.Invoke(context);
26: Console.WriteLine(">> " + context.Request.Path + ": " + context.Response.StatusCode);
27: }
28: }
29: }
We need an option class where user can specify the host root path and the entry page path.
1: public class AngularServerOptions
2: {
3: public FileServerOptions FileServerOptions { get; set; }
4:
5: public PathString EntryPath { get; set; }
6:
7: public bool Html5Mode
8: {
9: get
10: {
11: return EntryPath.HasValue;
12: }
13: }
14:
15: public AngularServerOptions()
16: {
17: FileServerOptions = new FileServerOptions();
18: EntryPath = PathString.Empty;
19: }
20: }
We also need an extension method so that user can append this feature in "Startup.cs" easily.
1: public static class AngularServerExtension
2: {
3: public static IBuilder UseAngularServer(this IBuilder builder, string rootPath, string entryPath)
4: {
5: var options = new AngularServerOptions()
6: {
7: FileServerOptions = new FileServerOptions()
8: {
9: EnableDirectoryBrowsing = false,
10: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, rootPath))
11: },
12: EntryPath = new PathString(entryPath)
13: };
14:
15: builder.UseDefaultFiles(options.FileServerOptions.DefaultFilesOptions);
16:
17: return builder.Use(next => new AngularServerMiddleware(next, options).Invoke);
18: }
19: }
Now with these classes ready we will change our "Startup.cs", use this middleware replace the default one, tell the server try to load "index.html" file if it cannot find resource.
The code below is just for demo purpose. I just tried to load "index.html" in all cases once the StaticFileMiddleware returned 404. In fact we need to validation to make sure this is an AngularJS route request instead of a normal static file request.
1: using System;
2: using Microsoft.AspNet.Builder;
3: using Microsoft.AspNet.FileSystems;
4: using Microsoft.AspNet.StaticFiles;
5: using Shaun.AspNet.Plugins.AngularServer;
6:
7: namespace Shaun.AspNet.Plugins.AngularServer.Demo
8: {
9: public class Startup
10: {
11: public void Configure(IBuilder app)
12: {
13: app.UseAngularServer("app", "/index.html");
14: }
15: }
16: }
Now let's run "k web" again and try to refresh our browser and we can see the page loaded successfully.
In the console window we can find the original request got 404 and we try to find "index.html" and return the correct result.
Summary
In this post I introduced how to use ASP.NET vNext to host AngularJS application as a static file server. I also demonstrated how to extend ASP.NET vNext, so that it supports AngularJS Html5Mode.
You can download the source code here.
Hope this helps,
Shaun
All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.
