Update on April, 30 2015

When I wrote this blog post, I wrote that Microsoft was not planning to support VB.NET in ASP.NET 5/MVC 6. That was true when I wrote the blog post, but this blog post generated some strong reactions from the VB.NET community. Well, it looks like VB.NET is back!

http://www.infoq.com/news/2015/04/VB-Core

I spent the last couple of weeks writing sample code for ASP.NET 5/MVC 6 and I was surprised by the depth of the changes in the current beta release of ASP.NET 5. ASP.NET 5 is the most significant new release of ASP.NET in the history of the ASP.NET framework — it has been rewritten from the ground up.

In this blog post, I list what I consider to be the top 10 most significant changes in ASP.NET 5. This is a highly opinionated list. If other changes strike you as more significant, please describe the change in a comment.

1. ASP.NET on OSX and Linux

For the first time in the history of ASP.NET, you can run ASP.NET 5 applications on OSX and Linux. Let me repeat this. ASP.NET 5 apps can run on Windows, OSX, and Linux. This fact opens up ASP.NET to a whole new audience of developers and designers.

The traditional audience for ASP.NET is professional developers working in a corporation. Corporate customers are welded to their Windows machines.

Startups, in stark contrast, tend to use OSX/Linux. Whenever I attend a startup conference, the only machines that I see in the audience are Macbook Pros. These people are not the traditional users of ASP.NET.

Furthermore, designers and front-end developers – at least when they are outside the corporate prison – also tend to use Macbook Pros. Whenever I attend a jQuery conference, I see Macbook Pros everywhere (the following picture is from the jQuery blog).

Enabling ASP.NET 5 to run on Windows, OSX, and Linux changes everything. For the first time, all developers and designers can start building apps with ASP.NET 5. And, they can use their favorite development environments such as Sublime Text and WebStorm when working with ASP.NET apps (No Visual Studio required).

Take a look at the OmniSharp project to see how you can use editors such as Sublime Text, Atom, Emacs, and Brackets with ASP.NET 5:

http://www.omnisharp.net/

2. No More Web Forms

I love ASP.NET Web Forms. I’ve spent hundreds – if not thousands – of hours of my life building Web Forms applications. However, it is finally time to say goodbye. ASP.NET Web Forms is not part of ASP.NET 5.

You can continue to build Web Forms apps in Visual Studio 2015 by targeting the .NET 4.6 framework. However, Web Forms apps cannot take advantage of any of the cool new features of ASP.NET 5 described in this list. If you don’t want to be left behind as history marches forward then it is finally time for you to rewrite your Web Forms app into ASP.NET MVC.

3. No More Visual Basic

It is also time to say goodbye to Visual Basic. ASP.NET 5 only supports C# and Visual Basic is left behind.

My hope is that this change won’t be too painful. I believe that there are only two people in the entire world who are building MVC apps in Visual Basic. It is time for both of you to stop it. There are good automatic converters for going from Visual Basic to C#:

http://converter.telerik.com/

4. Tag Helpers

Tag Helpers is the one feature that might have the biggest impact on the way that you create your views in an ASP.NET MVC application. Tag Helpers are a better alternative to using traditional MVC helpers.

Consider the following MVC view that contains a form for creating a new product:

@model MyProject.Models.Product


@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => p.Name, "Name:")
        @Html.TextBoxFor(m => p.Name)
    </div>
    <input type="submit" value="Create" />
}

In the view above, the Html.BeginForm(), Html.LabelFor(), and Html.TextBoxFor() helpers are used to create the form. These helpers would not be familiar to an HTML designer.

Here’s how the exact same form can be created by using Tag Helpers:

@model MyProject.Models.Product
@addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"

<form asp-controller="Products" asp-action="Create" method="post">
    <div>
        <label asp-for="Name">Name:</label>
        <input asp-for="Name" />
    </div>

    <input type="submit" value="Save" />
</form>

Notice that this new version of the form contains only (what looks like) HTML elements. For example, the form contains an INPUT element instead of an Html.TextBoxFor() helper. A front-end designer would be fine with this page.

The only thing special about this view is the special asp-for attributes. These attributes are used to extend the elements with server-side ASP.NET MVC functionality.

Damien Edwards put together an entire sample site that uses nothing but Tag Helpers here:

https://github.com/DamianEdwards/TagHelperStarterWeb

5. View Components

Goodbye subcontrollers and hello View Components!
In previous versions of ASP.NET MVC, you used the Html.Action() helper to invoke a subcontroller. For example, imagine that you want to display banner ads in multiple views. In that case, you would create a subcontroller that contained the logic for returning a particular banner advertisement and call the subcontroller by invoking Html.Action() from a view.

Subcontrollers – the Html.Action() helper — are not included in the current beta of MVC 6. Instead, MVC 6 includes an alternative technology called View Components.

Here’s how you can create a View Component that displays one of two banner advertisements depending on the time of day:

using Microsoft.AspNet.Mvc;
using System;

namespace Partials.Components
{
    public class BannerAd : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            var adText = "Buy more coffee!";

            if (DateTime.Now.Hour > 18)
            {
                adText = "Buy more warm milk!";
            }
            return View("_Advertisement", adText);
        }
    }
} 

If the time is before 5:00pm then the View Component returns a partial named _Advertisement with the advertisement text “Buy more coffee!”. If the time is after 5:00pm then the text changes to “Buy more warm milk!”.

Here’s what the _Advertisement partial looks like:

@model string

<div style="border:2px solid green;padding:15px">
    @Model
</div>

Finally, here is how you can use the BannerAd View Component in an MVC view:

  @Component.Invoke("BannerAd")

View Components are very similar to subcontrollers. However, subcontrollers were always a little odd. They were pretending to be controller actions but they were not really controller actions. View Components just seem more natural.

6. GruntJS, NPM, and Bower Support

Front-end development gets a lot of love in ASP.NET 5 through its support for GruntJS (and eventually Gulp).

GruntJS is a task runner that enables you to build front-end resources such as JavaScript and CSS files. For example, you can use GruntJS to concatenate and minify your JavaScript files whenever you perform a build in Visual Studio.

There are thousands of GruntJS plugins that enable you to do an amazing variety of different tasks (there are currently 4,334 plugins listed in the GruntJS plugin repository):

http://gruntjs.com/plugins

For example, there are plugins for running JavaScript unit tests, for validating the code quality of your JavaScript (jshint), compiling LESS and Sass files into CSS, compiling TypeScript into JavaScript, and minifying images.

In order to support GruntJS, Microsoft needed to support two new package managers (beyond NuGet). First, because GruntJS plugins are distributed as NPM packages, Microsoft added support for NPM packages.

Second, because many client-side resources – such as Twitter Bootstrap, jQuery, Polymer, and AngularJS – are distributed through Bower, Microsoft added support for Bower.

This means that you can run GruntJS using plugins from NPM and client resources from Bower.

7. Unified MVC and Web API Controllers

In previous versions of ASP.NET MVC, MVC controllers were different than Web API controllers. An MVC controller used the System.Web.MVC.Controller base class and a Web API controller used the System.Web.Http.ApiController base class.

In MVC 6, there is one and only one Controller class that is the base class for both MVC and Web API controllers. There is only the Microsoft.AspNet.Mvc.Controller class.

MVC 6 controllers return an IActionResult. When used as an MVC controller, the IActionResult might be a view. When used as a Web API controller, the IActionResult might be data (such as a list of products). The same controller might have actions that return both views and data.

In MVC 6, both MVC controllers and Web API controllers use the same routes. You can use either convention-based routes or attribute routes and they apply to all controllers in a project.

8. AngularJS

AngularJS is one of the most popular client-side frameworks for building Single Page Applications (SPAs). Visual Studio 2015 includes templates for creating AngularJS modules, controllers, directives, and factories.

The support in ASP.NET 5 for GruntJS makes ASP.NET an excellent server-side framework for building client-side AngularJS apps. You can combine and minify all of your AngularJS files automatically whenever you perform a build. You can interact with an MVC 6 controller from an AngularJS $resource using REST.

9. ASP.NET Dependency Injection Framework

ASP.NET 5 has built-in support for Dependency Injection and the Service Locator pattern. This means that you no longer need to rely on third-party Dependency Injection frameworks such as Ninject or AutoFac.

Imagine, for example, that you have created an IRepository interface and an EFRepository class that implements that interface. In that case, you can bind the EFRepository class to the IRepository interface in the ConfigureServices() method of the Startup.cs class like this:

services.AddTransient<IRepository, EFRepository>();

After you bind EFRepository and IRepository then you can use constructor dependency injection in your MVC controllers (and any other class) using code like this:

public class ProductsController : Controller
{
    private IRepository _repo;

    public ProductsController(IRepository repo)
    {
        _repo = repo;
    }
}

In the code above, the IRepository interface is passed to the constructor for the ProductsController. The built-in ASP.NET Dependency Injection framework passes EFRepository to the ProductsController because IRepository was bound to EFRepository.

You also can use the Service Locator pattern. Wherever you can access the HttpContext, you can access any registered services. For example, you can retrieve the EFRepository by using the following code inside of an MVC controller action:

var repo = this.Context.ApplicationServices.GetRequiredService<IRepository>();

10. xUnit.net

Goodbye Visual Studio Unit Testing Framework and hello xUnit.net!

In previous versions of ASP.NET MVC, the default testing framework was the Visual Studio Unit Testing Framework (sometimes called mstest). This framework uses the [TestClass] and [TestMethod] attributes to describe a unit test:

[TestClass]
public class CalculatorTests {

    [TestMethod]
    public void TestAddNumbers() {
        // Arrange
        var calc = new Calculator();

        // Act
        var result = calc.AddNumbers(0, 0);

        // Assert
        Assert.AreEqual(0, result);

    }

}

ASP.NET 5 uses xUnit.net as its unit test framework. This framework uses the [Fact] attribute instead of the [TestMethod] attribute (and no [TestClass] attribute]):

public class CalculatorTests
{
    [Fact]
    public void AddNumbers()
    {
        // Arrange
        var calculator = new Calculator();

        // Act
        var result = calculator.AddNumbers(1, 1);

        // Assert
        Assert.Equal(result, 13);
    }
}

If you look at the source code for ASP.NET 5 then you’ll see that xUnit.net is used to test ASP.NET extensively. For example, the MVC repository contains unit tests written with xUnit.net. You can take a look at the MVC repository (and its unit tests) here:

http://github.com/aspnet/mvc

ASP.NET uses a fork of xUnit.net that is located here:

https://github.com/aspnet/xunit

While researching this blog post, I took full advantage of the open-source code for ASP.NET 5 located at the following GitHub repositories:

https://github.com/aspnet

Routing in Previous Versions of ASP.NET

Previous versions of ASP.NET supported two types of routing: convention-based routing and attribute-based routing. When using convention-based routing, you could define your routes in your application RouteConfig.cs file like this:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

The code above defines a Default route that maps a request like “/products/details” to the ProductsController.Details() action.

ASP.NET MVC 5 introduced support for attribute-based routing. The primary advantage of attribute-based routing is that it allowed you to define your routes in the same file as your controller. For example, here’s an example of creating a ProductsController that includes both a [RoutePrefix] and [Route] attribute used for routing:

[RoutePrefix("Products")]
public class ProductsController : Controller
{
    [Route("Index")]
    public ActionResult Index()
    {
        return View();
    }
}

Regardless of whether you used convention-based routing or attribute-based routing, all of your routes ended up in a static collection located at RouteTable.Routes.

If you used the ASP.NET Web API then routing worked in a similar way. You could define convention-based routes in the WebApiConfig.cs file and add attribute-based routes to your Web API controller classes.

However, there were two important differences between routing in MVC and the Web API. First, the Web API supported RESTful routes by default. If you gave a Web API controller action a name that started with Get, Post, Put, Delete then you could invoke the action by performing an HTTP GET, POST, PUT, or DELETE request. For example, you could invoke a Web API action named PostMovie() simply by performing an HTTP POST.

The other important difference between MVC and the Web API was subtler. Behind the scenes, MVC and the Web API did not share the same routing framework. Routing in MVC and the Web API followed similar patterns, but routing was implemented with different code (originally written by different Microsoft teams).

Everything in ASP.NET 5 and MVC 6 has been rewritten from the ground up. This includes the routing framework used by both MVC and the Web API. There are several important changes to routing that I discuss in this blog post.

First, in ASP.NET 5, there is no longer a distinction between MVC and Web API controllers. Both MVC and Web API controllers derive from the very same Controller base class.

This means that the same routing framework is used for both MVC and the Web API. With ASP.NET 5, anything that is true of routing for MVC is also true for the Web API.

Second, unlike earlier versions of MVC, default routes are created for you automatically. You don’t need to configure anything to route a request to a controller action. A set of default routes is created for you automatically.

Third and finally, in MVC 6, you are provided with a rich set of inline constraints and parameter options that you can use with both convention-based and attributed-based routing. For example, you can constrain the data type of your route parameters, mark a parameter as optional, and provide default values for your parameters right within your route templates.

Creating Routes

Let’s start with the very basics. I’m going to show you the minimal amount of code that you need to use routing in an ASP.NET 5 application. I won’t even assume that you are using MVC.

Here’s my Startup class:

using System;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.AspNet.Routing;
using Microsoft.AspNet.Routing.Template;
using Microsoft.Framework.DependencyInjection;

namespace RoutePlay
{
    public class Startup
    {

        public void Configure(IApplicationBuilder app)
        {
          RouteCollection routes = new RouteCollection();
          routes.Add(new TemplateRoute(new DebuggerRouteHandler("RouteHandlerA"), "test/{a}/{b}", null));
          routes.Add(new TemplateRoute(new DebuggerRouteHandler("RouteHandlerB"), "test2", null));
          app.UseRouter(routes);
        }
    }
}

In the code above, I’ve created a Configure() method that I use to configure routing. I create a Route collection that contains two routes. Finally, I pass the Route collection to the ApplicationBuilder.UseRouter() method to enable the routes.

The routes are created with the TemplateRoute class. The TemplateRoute class is initialized with a Route Handler and a URL template. The first route – named RouteHandlerA — matches URLs with the pattern “test/{a}/{b}” and the second route – named RouteHandlerB – matches URLs with the pattern “test2”.

The essence of routing is mapping an incoming browser request to a Route Handler. In the code above, requests are mapped to a custom handler that I created named DebuggerRouteHandler.

Here’s the code for the DebuggerRouteHandler:

using Microsoft.AspNet.Http;
using Microsoft.AspNet.Routing;
using System;
using System.Threading.Tasks;

namespace RoutePlay
{
	public class DebuggerRouteHandler : IRouter
	{
		private string _name;

		public DebuggerRouteHandler(string name)
		{
			_name = name;
		}

		public string GetVirtualPath(VirtualPathContext context)
		{
			throw new NotImplementedException();
		}

		public async Task RouteAsync(RouteContext context)
		{
			var routeValues = string.Join("", context.RouteData.Values);
            var message = String.Format("{0} Values={1} ", _name, routeValues);
			await context.HttpContext.Response.WriteAsync(message);
			context.IsHandled = true;
		}
	}
}

The DebuggerRouteHandler simply displays the name of the route and any route values extracted from the URL template. For example, if you enter the URL “test/apple/orange” into the address bar of your browser then you get the following response:

Creating Routes with MVC 6

When using MVC 6, you don’t create your Route collection yourself. Instead, you let MVC create the route collection for you.

Here’s a Startup class that is configured to use MVC 6:

using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;

namespace RoutePlay
{
	public class Startup
    {
		public void ConfigureServices(IServiceCollection services)
		{
			services.AddMvc();
		}

		public void Configure(IApplicationBuilder app)
        {
			app.UseMvc();
		}
	}
}

The ConfigureServices() method is used to register MVC with the Dependency Injection framework built into ASP.NET 5. The Configure() method is used to register MVC with OWIN.

Here’s what my MVC 6 ProductsController looks like:

using Microsoft.AspNet.Mvc;

namespace RoutePlay.Controllers
{
    public class ProductsController : Controller
    {
        public IActionResult Index()
        {
            return Content("It Works!");
        }
    }
}

Notice that I have not configured any routes. I have not used either convention-based or attribute-based routing, but I don’t need to do this. If I enter the request “/products/index” into my browser address bar then I get the response “It Works!”:

When you call ApplicationBuilder.UseMvc() in the Startup class, the MVC framework adds routes for you automatically. Here’s what the framework code for the UseMvc() method looks like:

public static IApplicationBuilder UseMvc([NotNull] this IApplicationBuilder app)
{
    return app.UseMvc(routes =>
    {
    });
}

public static IApplicationBuilder UseMvc(
    [NotNull] this IApplicationBuilder app,
    [NotNull] Action<IRouteBuilder> configureRoutes)
{
    // Verify if AddMvc was done before calling UseMvc
    // We use the MvcMarkerService to make sure if all the services were added.
    MvcServicesHelper.ThrowIfMvcNotRegistered(app.ApplicationServices);

    var routes = new RouteBuilder
    {
        DefaultHandler = new MvcRouteHandler(),
        ServiceProvider = app.ApplicationServices
    };

    configureRoutes(routes);

    // Adding the attribute route comes after running the user-code because
    // we want to respect any changes to the DefaultHandler.
    routes.Routes.Insert(0, AttributeRouting.CreateAttributeMegaRoute(
        routes.DefaultHandler,
        app.ApplicationServices));

    return app.UseRouter(routes.Build());
}

The AttributeRouting.CreateAttributeMegaRoute() does all of the heavy-lifting here (the word “Mega” in its name is very appropriate). The CreateAttributeMegaRoute() method iterates through all of your MVC controller actions and builds routes for you automatically. Thank you CreateAttributeMegaRoute() — you are going to save me tons of work!

Convention-Based Routing

You can use convention-based routing with ASP.NET MVC 5 by defining the routes in your project’s Startup class. For example, here is how you would map the requests /Super and /Awesome to the ProductsController.Index() action:

using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Routing;
using Microsoft.Framework.DependencyInjection;

namespace RoutePlay
{
	public class Startup
    {
		public void ConfigureServices(IServiceCollection services)
		{
			services.AddMvc();
		}

		public void Configure(IApplicationBuilder app)
		{
			app.UseMvc(routes =>
			{
				// route1
				routes.MapRoute(
					name: "route1",
					template: "super",
					defaults: new { controller = "Products", action = "Index" }
				);
				// route2
				routes.MapRoute(
					name: "route2",
					template: "awesome",
					defaults: new { controller = "Products", action = "Index" }
				);
			});
        }
	}
}

If you squint your eyes really hard then the code above in the Configure() method for setting up the routes looks similar to the code in a RouteConfig.cs file.

Attribute-Based Routing

You also can use attribute-based routing with MVC 6. Here’s how you can modify the ProductsController Index() action so you can invoke it with the “/Things/All” request:

using Microsoft.AspNet.Mvc;

namespace RoutePlay.Controllers
{
    [Route("Things")]
    public class ProductsController : Controller
    {
        [Route("All")]
        public IActionResult Index()
        {
            return Content("It Works!");
        }
    }
}

Notice that both the ProductsController class and the Index() action are decorated with a [Route] attribute. The combination of the two attributes enables you to invoke the Index() method by requesting “/Things/All”.

Here’s what a Web API controller looks like in MVC 6:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;

namespace RoutePlay.Controllers.Api.Controllers
{
    [Route("api/[controller]")]
    public class MoviesController : Controller
    {
        // GET: api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

Notice that a Web API controller, just like an MVC controller, derives from the base Controller class. That’s because there is no difference between a Web API controller and MVC controller in MVC 6 – they are the exact same thing.

You also should notice that the Web API controller in the code above is decorated with a [Route] attribute that enables you to invoke the Movies controller with the request “/api/movies”. The special [controller] and [action] tokens are new to MVC 6 and they allow you to easily refer to the controller and action names in your route templates.

If you mix convention-based and attribute-based routing then attribute-based routing wins. Furthermore, both convention-based and attribute-based routing win over the default routes.

Creating Restful Routes

You can use RESTful style routing with both MVC and Web API controllers. Consider the following controller (a mixed MVC and Web API controller):

using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.WebUtilities.Collections;

namespace RoutePlay.Controllers
{
    [Route("[controller]")]
    public class MyController : Controller
    {
		// GET: /my/show
		[HttpGet("Show")]
		public IActionResult Show()
		{
			return View();
		}

		// GET: /my
		[HttpGet]
		public IActionResult Get()
		{
			return Content("Get Invoked");
		}

		// POST: /my
		[HttpPost]
		public IActionResult Post()
		{
			return Content("Post Invoked");
		}

		// POST: /my/stuff
		[HttpPost("Stuff")]
		public IActionResult Post([FromBody]string firstName)
		{
			return Content("Post Stuff Invoked");
		}


	}
}

The MyController has the following four actions:

• Show() – Invoked with an HTTP GET request for “/my/show”
• Get() – Invoked with an HTTP GET request for “/my”
• Post() – Invoked with an HTTP POST request for “/my”
• Post([fromBody]string firstName) – Invoked with an HTTP POST request for “/my/stuff”

Notice that the controller is decorated with a [Route(“[controller]”)] attribute and each action is decorated with a [HttpGet] or [HttpPost] attribute.

If you just use the [HttpPost] attribute on an action then you can invoke the action without using the action name (for example, “/my”). If you use an attribute such as [HttpPost(“stuff”)] that includes a template parameter then you must include the action name when invoking the action (for example, “/my/stuff”).

The Show() action returns the following view:

<p>
	<a href="/my">GET</a>
</p>
<form method="post" action="/my">
	<input type="submit" value="POST" />
</form>
<form method="post" action="/my/stuff">
	<input name="firstname" />
	<input type="submit" value="POST STUFF" />
</form>

If you click the GET link then the Get() action is invoked. If you post the first form then the first Post() action is invoked and if you post the second form then the second Post() action is invoked.

Creating Route Constraints

You can use constraints to constrain the types of values that can be passed to a controller action. For example, if you have a controller action that displays product details for a particular product given a particular product id, then you might want to constrain the product id to be an integer:

using Microsoft.AspNet.Mvc;

namespace RoutePlay.Controllers
{
    [Route("[controller]")]
    public class ProductsController : Controller
    {

		[HttpGet("details/{id:int}")]
		public IActionResult Details(int id)
		{
			return View();
		}

	}
}

Notice that the Details() action is decorated with an [HttpGet] attribute that uses the template “details/{0:int}” to constrain the id passed to the action to be an integer. There are plenty of other inline constraints that you use such as alpha, minlength, and regex.

ASP.NET 5 introduces support for optional parameters. You can use a question mark ? in a template to mark a parameter as optional like this:

[HttpGet("details/{id:int?}")]
public IActionResult Details(int id)
{
	return View();
}

You can invoke the Details() action in the controller above using a URL like “/products/details/8” or a URL that leaves out the id like “/products/details” (in that case, id has the value 0).

Finally, ASP.NET 5 introduces support for default parameter values. If you don’t supply a value for the id parameter then the parameter gets the value 99 automatically:

[HttpGet("details/{id:int=99}")]
public IActionResult Details(int id)
{
	return View();
}

Summary

ASP.NET 5 (and ASP.NET MVC 6) includes a new routing framework rewritten from the ground up. In this blog post, I’ve provided a deep dive into how this new framework works.

First, I discussed how routing works independently of MVC 6. I explained how you can create a new Route collection in the Startup class.

Next, I demonstrated how you can use MVC 6 default routes, convention-based routes, and attribute routes. I also elaborated on how you can create controllers that follow RESTful conventions.

Finally, I discussed how you can take advantage of inline constraints, optional parameters, and default parameter values.

If you want to dig more deeply into routing then I recommend taking a look at the following two GitHub aspnet repositories:

https://github.com/aspnet/Routing
https://github.com/aspnet/Mvc

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I walk through the steps required to run an ASP.NET 5 app on a Mac. In particular, I setup the Movies app to run on OSX Yosemite on my MacBook Pro. I try to follow the instructions for running ASP.NET 5 on OSX created by the ASP.NET team as closely as possible but I encounter some issues along the way:

https://github.com/aspnet/home

Installing Mono

Before you can run ASP.NET 5 on a Mac, you must first install Mono. The Mono Project is independent from Microsoft. Mono is an open-source implementation of .NET for different platforms such as Mac OSX and Linux.

In theory, the Homebrew script supplied by the ASP.NET team should install the correct version of Mono automatically, but I couldn’t get this to work. I ended up installing Mono myself by visiting the following page:

http://www.mono-project.com/download/

Installing Mono was painless. They have a nice installer that does all of the work.

Updating Homebrew

The next step is to use Homebrew to install KVM. I ran into several problems getting this to work on OSX Yosemite.

The first problem is that the location of Ruby on Yosemite has changed which breaks Homebrew:

http://apple.stackexchange.com/questions/153790/how-to-fix-brew-after-its-upgrade-to-yosemite

I executed the following sequence of commands to update Homebrew so it works with OSX Yosemite:

cd /System/Library/Frameworks/Ruby.framework/Versions 
sudo ln -s Current 1.8 
sudo brew update 
sudo rm 1.8

Installing KVM

After I got Homebrew into a working state, I used Homebrew to install the ASP.NET 5 KVM. First, you need to execute the following command to associate the aspnet/k GitHub repository with Homebrew:

brew tap aspnet/k

Next, run the following command to perform the actual install of kvm:

brew install kvm

After running this command, I ran into an error stating that kvm was installed but “just not linked”. Executing the following command fixed the problem:

sudo brew link kvm

Leave and re-enter Terminal and execute the following command to verify the installation of kvm and Mono:

kvm list

Before running the kvm or k command, you need to run the following command first:

source kvm.sh

You’ll need to run this command once each and every time you open the Terminal app so Terminal knows where to look for kvm and k.

Installing the Movies App

Next, I grabbed the source code for the Movies app from my GitHub repository by executing the following command:

git clone https://github.com/StephenWalther/MovieAngularJSApp.git

The modified Movies app described in this blog post can be found in the Part7 folder.

I used Sublime Text to edit the files in the Movies app while running OSX.

Using the In-Memory Database

In previous parts of this blog series, I used Entity Framework 7 with Microsoft SQL Server to store my list of movies. This won’t work on a Mac because you cannot run Microsoft SQL Server on a Mac.

You have a few choices here:

• SQLite – SQLite is an open-source database that works on Windows, Windows Phone, OSX, and Linux. According to the description page (http://www.sqlite.org), it is the most widely deployed database in the world.

• Azure SQL Database – Connect to a Microsoft Azure SQL Database from your app running in OSX. In other words, host the Movies app on OSX and your database in the cloud.

• In-Memory – Use the In-Memory provider for the Entity Framework to run an in-memory database (which dies and goes away each time you restart your web server).

I could not get SQLite to work with the current BETA version of ASP.NET 5. I could not find the UseSQLite() method, so I assume that this provider is not ready yet. You can look at the SQLite repository here:

https://github.com/aspnet/DataCommon.SQLite

Using an Azure SQL Database would be the best choice for a real-world application. However, I did not want to require an external dependency to run the Movies app.

Therefore, I decided to use the In-Memory provider for the Entity Framework. The disadvantage of the In-Memory provider is that the database does not persist. However, the advantage is that it works across Windows, OSX, and Linux.

I had to make two changes to the Movies app to use the In-Memory provider. First, I had to add a reference to EntityFramework.InMemory to the dependencies section of the Movies app project.json file. Adding this dependency pulls in the NuGet package for the In-Memory provider.

Second, I had to make two changes to the Startup class. I updated the ConfigureServices() method in Startup.cs to check whether the app was running on Mono (OSX or Linux). When the Movies app is run on Mono, it uses the In-Memory provider. Otherwise, when the Movies app is run on Windows, it uses Microsoft SQL Server.

public void ConfigureServices(IServiceCollection services)
{

	//Sql client not available on mono
    var usingMono = Type.GetType("Mono.Runtime") != null;

    // Add EF services to the services container
    if (usingMono)
    {
        services.AddEntityFramework(Configuration)
                .AddInMemoryStore()
                .AddDbContext<MoviesAppContext>();
    } else {
		services.AddEntityFramework(Configuration)
				.AddSqlServer()
				.AddDbContext<MoviesAppContext>(options =>
				{
					options.UseSqlServer(Configuration.Get("Data:DefaultConnection:ConnectionString"));
				});
	}

	// add ASP.NET Identity
	services.AddIdentity<ApplicationUser, IdentityRole>(Configuration)
		.AddEntityFrameworkStores<MoviesAppContext>();

	// add ASP.NET MVC
	services.AddMvc();
}

I also updated the CreateSampleData() method in the Startup class. The Startup class calls EnsureCreatedAsync() to create the database only when you are running the app on Windows and not Mono. You don’t need to create an actual database file when using the In-Memory provider.

private static async Task CreateSampleData(IServiceProvider applicationServices)
{
	using (var dbContext = applicationServices.GetService<MoviesAppContext>())
	{
		// ensure SQL Server database created
		var sqlServerDatabase = dbContext.Database as SqlServerDatabase;
		if (sqlServerDatabase != null)
		{
			sqlServerDatabase.EnsureCreatedAsync().Wait();
		}

		// add some movies
		var movies = new List<Movie>
		{
			new Movie {Title="Star Wars", Director="Lucas"},
			new Movie {Title="King Kong", Director="Jackson"},
			new Movie {Title="Memento", Director="Nolan"}
		};
		movies.ForEach(m => dbContext.Movies.AddAsync(m));

		// add some users
		var userManager = applicationServices.GetService<UserManager<ApplicationUser>>();

		// add editor user
		var stephen = new ApplicationUser
		{
			UserName = "Stephen"
		};
		var result = await userManager.CreateAsync(stephen, "P@ssw0rd");
		await userManager.AddClaimAsync(stephen, new Claim("CanEdit", "true"));

		// add normal user
		var bob = new ApplicationUser
		{
			UserName = "Bob"
		};
		await userManager.CreateAsync(bob, "P@ssw0rd");
	}
}

Using Kestrel

You can’t use Internet Information Services (IIS) on OSX. Instead, you need to use the Kestrel web server, which was built by the ASP.NET team to work with both OSX and Linux.

Under the covers, Kestrel is built on top of Libuv, which is also used by NodeJS. You can read about Libuv here:

http://nikhilm.github.io/uvbook/

In order to use Kestrel, you must add a dependency on Kestrel to your project.json file. Here’s what my complete dependencies section looks like (the top 2 dependencies are used by OSX):

"dependencies": {
     "Kestrel": "1.0.0-*",
     "EntityFramework.InMemory": "7.0.0-*", 

     "EntityFramework.SqlServer": "7.0.0-beta2",
     "EntityFramework.Commands": "7.0.0-beta2",
     "Microsoft.AspNet.Mvc": "6.0.0-beta2",
     /* "Microsoft.AspNet.Mvc.WebApiCompatShim": "6.0.0-beta2", */
     "Microsoft.AspNet.Diagnostics": "1.0.0-beta2",
     "Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta2",
     "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta2",
     "Microsoft.AspNet.Security.Cookies": "1.0.0-beta2",
     "Microsoft.AspNet.Server.IIS": "1.0.0-beta2",
     "Microsoft.AspNet.Server.WebListener": "1.0.0-beta2",
     "Microsoft.AspNet.StaticFiles": "1.0.0-beta2",
     "Microsoft.Framework.ConfigurationModel.Json": "1.0.0-beta2",
     "Microsoft.Framework.CodeGenerators.Mvc": "1.0.0-beta2",
     "Microsoft.Framework.Logging": "1.0.0-beta2",
     "Microsoft.Framework.Logging.Console": "1.0.0-beta2",
     "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta1"
  },  

By the way, a Kestrel is a type of bird (a falcon) that has the special ability of being able to fly in dead air.

Fetching NuGet Dependencies

Before we can run our Movies app, we need to pull in all of the NuGet dependencies that we listed in the project.json file. Execute the following command:

 
kpm restore

Running Kestrel

We are finally ready to run the Movies app on OSX. Execute the following command:

k kestrel

Executing this command will startup the Kestrel web server.

By default Kestrel runs on port 5104. You can determine the port being used by Kestrel by taking a look at the commands section of your project.json file.

Open a browser and navigate to the following address and you should see the Movies app:

http://localhost:5104

The Movies app is completely functional. You can login using either the Stephen and Bob user (with the password P@ssw0rd). If you login as Stephen then you can add, edit, and delete movies.

Because we are using the In-Memory provider, any changes that we make will disappear when we stop the app. If you want to persist changes then you should use an Azure SQL Database and persist your data to the cloud.

Stopping Kestrel

Stopping Kestrel is surprisingly difficult. On OSX, hitting CTRL-C in Terminal won’t do anything and won’t stop the server. Here are the steps that work for me:

1. Hit CTRL-Z to stop Kestrel.

2. Type ps to get a list of processes.

3. Type kill followed by the process id to kill the Mono process.

There is a StackOverflow description of this issue here:

http://stackoverflow.com/questions/25712814/how-to-quit-asp-net-kestrel-web-server-on-a-mac

Summary

The goal of this blog post was to describe the set of steps that I needed to complete to get the Movies app running on OSX. There were some bumps on the way, but it is amazing to see ASP.NET (and the Entity Framework) running outside of Windows.

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how you can use ASP.NET Identity to provide different permissions to different users. In particular, I demonstrate how to create two users named Stephen and Bob. Stephen will have edit permissions on the Movies database and Bob will not.

Here’s what Stephen’s screen looks like:

Notice that Stephen can edit, delete, and add movies.

Now, here is what Bob’s screen looks like:

Bob cannot do anything except view the list of movies. He is not allowed to edit or add movies.

Enabling ASP.NET Identity

The first step is to pull in all of the NuGet packages that we need to use ASP.NET Identity. You need to add the following packages to the dependencies section of your project.json file:

  "dependencies": {
	"EntityFramework.SqlServer": "7.0.0-beta2",
	"EntityFramework.Commands": "7.0.0-beta2",
	"Microsoft.AspNet.Mvc": "6.0.0-beta2",
	/* "Microsoft.AspNet.Mvc.WebApiCompatShim": "6.0.0-beta2", */
	"Microsoft.AspNet.Diagnostics": "1.0.0-beta2",
	"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-beta2",
	"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-beta2",
	"Microsoft.AspNet.Security.Cookies": "1.0.0-beta2",
	"Microsoft.AspNet.Server.IIS": "1.0.0-beta2",
	"Microsoft.AspNet.Server.WebListener": "1.0.0-beta2",
	"Microsoft.AspNet.StaticFiles": "1.0.0-beta2",
	"Microsoft.Framework.ConfigurationModel.Json": "1.0.0-beta2",
	"Microsoft.Framework.CodeGenerators.Mvc": "1.0.0-beta2",
	"Microsoft.Framework.Logging": "1.0.0-beta2",
	"Microsoft.Framework.Logging.Console": "1.0.0-beta2",
	"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-beta1"
  },

Notice that I am including the Microsoft.AspNet.Identity.EntityFramework and Microsoft.AspNet.Security.Cookies packages. These packages pull in additional dependencies such as Microsoft.AspNet.Identity and Microsoft.AspNet.Security.

Next, you need to update the ConfigureServices() method in your Startup.cs file. The ConfigureServices() method is used to register services with the built-in Dependency Injection framework included with ASP.NET 5:

public void ConfigureServices(IServiceCollection services)
{
	// add Entity Framework
	services.AddEntityFramework(Configuration)
			.AddSqlServer()
			.AddDbContext<MoviesAppContext>(options =>
			{
				options.UseSqlServer(Configuration.Get("Data:DefaultConnection:ConnectionString"));
			});

	// add ASP.NET Identity
	services.AddIdentity<ApplicationUser, IdentityRole>(Configuration)
		.AddEntityFrameworkStores<MoviesAppContext>();

	// add ASP.NET MVC
	services.AddMvc();
}

Notice that I am adding the Identity service. When I register the service, I specify that I will be use the Identity service with the Entity Framework as my data store for storing usernames and passwords. If I was running my app outside of Windows – for example, using OSX – then I could use an alternative data store such as SQLite.

See the following URL for the list of providers that Microsoft plans to support with Entity Framework 7:

https://github.com/aspnet/EntityFramework/wiki/Using-EF7-in-Traditional-.NET-Applications

Finally, we need to update the Configure() method in the Startup.cs file. The Configure() method – unlike the ConfigureServices() method – is used by OWIN to configure the application pipeline. Here’s what our updated Configure() method looks like:

public void Configure(IApplicationBuilder app)
{
	app.UseIdentity();
	app.UseMvc();

	CreateSampleData(app.ApplicationServices).Wait();
}

Notice that I call app.UseIdentity() to add ASP.NET Identity to the application pipeline. I explain the CreateSampleData() method below.

Modifying Your DbContext

In order to take advantage of ASP.NET Identity, we need to modify our DbContext class. Here’s the updated MoviesAppContext:

using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.Data.Entity;
using System;

namespace MovieAngularJSApp.Models
{
    public class ApplicationUser : IdentityUser {}

    public class MoviesAppContext : IdentityDbContext<ApplicationUser>
    {
		public DbSet<Movie> Movies { get; set; }
	}
}

Notice that the modified MoviesAppContext now inherits from the base IdentityDbContext class. Inheriting from this base class adds all of the additional entities required by the Entity Framework. If you open up your database then you can see all of the extra tables that you get after inheriting from IdentityDbContext:

Notice that I get additional database tables such as the AspNetUsers and AspNetUserClaims tables.
Adding Users at Startup

We want to add the Stephen and Bob users to our database automatically at startup. Therefore, I am going to modify the Startup.cs file so that it creates the database and adds sample data to the database automatically:

public void Configure(IApplicationBuilder app)
{
	app.UseIdentity();
	app.UseMvc();

	CreateSampleData(app.ApplicationServices).Wait();
}


private static async Task CreateSampleData(IServiceProvider applicationServices)
{
	using (var dbContext = applicationServices.GetService<MoviesAppContext>())
	{
		var sqlServerDatabase = dbContext.Database as SqlServerDatabase;
		if (sqlServerDatabase != null)
		{
			// Create database in user root (c:\users\your name)
			if (await sqlServerDatabase.EnsureCreatedAsync()) {
				// add some movies
				var movies = new List<Movie>
				{
					new Movie {Title="Star Wars", Director="Lucas"},
					new Movie {Title="King Kong", Director="Jackson"},
					new Movie {Title="Memento", Director="Nolan"}
				};
				movies.ForEach(m => dbContext.Movies.AddAsync(m));

				// add some users
				var userManager = applicationServices.GetService<UserManager<ApplicationUser>>();

				// add editor user
				var stephen = new ApplicationUser
				{
					UserName = "Stephen"
				};
				var result = await userManager.CreateAsync(stephen, "P@ssw0rd");
				await userManager.AddClaimAsync(stephen, new Claim("CanEdit", "true"));

				// add normal user
				var bob = new ApplicationUser
				{
					UserName = "Bob"
				};
				await userManager.CreateAsync(bob, "P@ssw0rd");
			}

		}
	}
}

Notice that I create an async static method named CreateSampeData(). I need to make the CreateSampleData() method async because the ASP.NET Identity methods are async.

The CreateSampleData() method first ensures that the MoviesDatabase exists. If it does not, the EnsureCreatedAsync() method creates it.

Next, three movies are added to the Movies database table. Each movie is added by calling the dbContext.Movies.AddAsync() method.

Finally, two users are added to the database: Stephen and Bob. The users are added by calling the UserManager.CreateAsync() method.

A claim is added to the Stephen user. Stephen is provided with CanEdit permissions. We’ll use this claim in our Movies app to enable Stephen, but not Bob, to edit movies.

Whenever you want to recreate the sample data, you can just delete the MoviesDatabase database. In Visual Studio, open the SQL Server Object Explorer window, right-click your database, and select the Delete menu option. Make sure that you check Close existing connections or you will be blocked from deleting the database.

Forcing Users to Login

Now that we have the basic setup out of the way, we can force users to login by adding an [Authorize] attribute to our Home controller like this:

using Microsoft.AspNet.Mvc;
using System.Security.Claims;

namespace MovieAngularJSApp.Controllers
{
	[Authorize]
	public class HomeController : Controller
    {
        
        public IActionResult Index()
        {
		var user = (ClaimsIdentity)User.Identity;
		ViewBag.Name = user.Name;
		ViewBag.CanEdit = user.FindFirst("CanEdit") != null ? "true" : "false";
		return View();
        }
    }
}

If an anonymous user attempts to navigate to the root of our app then the anonymous user will be redirected to the /account/login controller action. Here’s what the Login() methods look like in the AccountController:

using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Mvc;
using MovieAngularJSApp.Models;
using System.Threading.Tasks;

namespace MovieAngularJSApp.Controllers
{
    public class AccountController : Controller
    {
		private UserManager<ApplicationUser> _userManager;
		private SignInManager<ApplicationUser> _signInManager;


		public AccountController(UserManager<ApplicationUser> userManager, SignInManager<ApplicationUser> signInManager)
		{
			_userManager = userManager;
			_signInManager = signInManager;
		}


		public IActionResult Login()
        {
            return View();
        }

		[HttpPost]
		public async Task<IActionResult> Login(LoginViewModel login, string returnUrl = null)
		{
			var signInStatus = await _signInManager.PasswordSignInAsync(login.UserName, login.Password, false, false);
			if (signInStatus == SignInStatus.Success)
			{
				return Redirect("/home");
			}
			ModelState.AddModelError("", "Invalid username or password.");
			return View();
		}


		public IActionResult SignOut()
		{
			_signInManager.SignOut();
			return Redirect("/home");
		}

	}
}

The UserManager and SignInManager classes are passed to the AccountController through the built-in ASP.NET 5 dependency injection. The Login() method calls the SignInManager.PasswordSignInAsync() method to validate the username and password combination entered by the user. If the combination validates then the user is redirected back to the Home controller.

Passing Claims Data to AngularJS

Stephen can edit movies but not Bob. To make this work, we need to pass the claims data associated with the Stephen and Bob users from the server (ASP.NET) to the client (AngularJS).

In the Home controller, we add the CanEdit claim to the ViewBag like this:

using Microsoft.AspNet.Mvc;
using System.Security.Claims;

namespace MovieAngularJSApp.Controllers
{
	[Authorize]
	public class HomeController : Controller
    {
        
        public IActionResult Index()
        {
		var user = (ClaimsIdentity)User.Identity;
		ViewBag.Name = user.Name;
		ViewBag.CanEdit = user.FindFirst("CanEdit") != null ? "true" : "false";
		return View();
        }
    }
}

We cast the user identity as a ClaimsIdentity and then we assign the value of the CanEdit claim to the ViewBag.CanEdit property. Because Stephen has the CanEdit claim, the ViewBag.CanEdit property will have the value “true” (we need to use a string here because Boolean.ToString() gets converted to “True” instead of “true” which confuses our JavaScript).

Here’s what our modified Index view looks like:

<!DOCTYPE html>
<html ng-app="moviesApp">
<head>
	<base href="/">
	<meta charset="utf-8" />
	<title>Movies</title>

	<!-- jQuery -->
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

	<!-- AngularJS-->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>


	<!-- App -->
	<link rel="stylesheet" href="/styles.css" />
	<script src="/app.js"></script>

	<!-- Get Server Data -->
	<script>
		angular.module("moviesApp").value("canEdit", @ViewBag.CanEdit);
	</script>

</head>
<body ng-cloak>

	@ViewBag.Name / <a href="/account/signout" target="_self">sign out</a>

	<div class="container-fluid">
		<ng-view></ng-view>
	</div>
</body>
</html>

Notice the section of the page labeled Get Server Data. The value of the CanEdit claim is assigned to an AngularJS module value named “canEdit”. The canEdit value is used in the AngularJS moviesListController like this:

/* Movies List Controller  */
MoviesListController.$inject = ['$scope', 'Movie', 'canEdit'];

function MoviesListController($scope, Movie, canEdit) {
    $scope.canEdit = canEdit;
    $scope.movies = Movie.query();
}

The canEdit value is injected into the controller and assigned to the controller’s scope. This makes the canEdit value available in the AngularJS list view which is used to display the list of movies:

<div>
    <h1>List Movies</h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th ng-show="canEdit"></th>
                <th>Title</th>
                <th>Director</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="movie in movies">
                <td ng-show="canEdit">
                    <a href="/movies/edit/{{movie.Id}}" class="btn btn-default btn-xs">edit</a>
                    <a href="/movies/delete/{{movie.Id}}" class="btn btn-danger btn-xs">delete</a>
                </td>
                <td>{{movie.Title}}</td>
                <td>{{movie.Director}}</td>
            </tr>
        </tbody>
    </table>

    <p ng-show="canEdit">
        <a href="/movies/add" class="btn btn-primary">Add New Movie</a>
    </p>
</div>

Notice that the AngularJS ng-show directive is used twice in the list view. The ng-show directive is used to hide or display the first column of the HTML table that lists the movies (this hides or shows the Movie edit and delete buttons). The ng-show directive also is used to hide or show the Add New Movie button at the bottom of the view.

Because Stephen has the CanEdit claim, when Stephen opens the List view, Stephen sees the edit, delete, and add buttons:

However, Bob does not have the CanEdit claim. Therefore, Bob does not get these buttons:

Securing API Controller Actions

There is one last thing that we need to do to make this all work. Bob cannot see the edit buttons but Bob could, if he is feeling super sneaky, bypass the views and post new movies directly to the Movies API controller.

Here’s how we block this from happening:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;
using MovieAngularJSApp.Models;
using System.Security.Claims;

namespace MovieAngularJSApp.API.Controllers
{
    [Route("api/[controller]")]
    public class MoviesController : Controller
    {
		private readonly MoviesAppContext _dbContext;

		public MoviesController(MoviesAppContext dbContext) 
		{
			_dbContext = dbContext;
		}

        [HttpGet]
        public IEnumerable<Movie> Get()
        {
			return _dbContext.Movies;
        }


        [HttpGet("{id:int}")]
        public IActionResult Get(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			if (movie == null) {
				return new HttpNotFoundResult();
			} else {
				return new ObjectResult(movie);
            }
		}


        [HttpPost]
		[Authorize("CanEdit", "true")]
        public IActionResult Post([FromBody]Movie movie)
        {
			if (ModelState.IsValid)
			{
				if (movie.Id == 0)
				{
					_dbContext.Movies.Add(movie);
					_dbContext.SaveChanges();
					return new ObjectResult(movie);
				}
				else
				{
					var original = _dbContext.Movies.FirstOrDefault(m => m.Id == movie.Id);
					original.Title = movie.Title;
					original.Director = movie.Director;
					original.TicketPrice = movie.TicketPrice;
					original.ReleaseDate = movie.ReleaseDate;
					_dbContext.SaveChanges();
					return new ObjectResult(original);
				}
			}

			// This will work in later versions of ASP.NET 5
			//return new BadRequestObjectResult(ModelState);
			return null;
		}


		[Authorize("CanEdit", "true")]
		[HttpDelete("{id:int}")]
        public IActionResult Delete(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			_dbContext.Movies.Remove(movie);
			_dbContext.SaveChanges();
            return new HttpStatusCodeResult(200);
        }


    }
}

Notice that both the Post() and Delete() actions in the MoviesController in the code above are decorated with [Authorize] attributes. The [Authorize] attributes are used to verify that the person invoking the controller action has the CanEdit claim.

If Bob, who does not have the CanEdit claim, attempts to invoke either action then Bob will be blocked. Bob will get a 302 redirect that redirects the Ajax API call back to the /account/login view:

Bob’s Ajax request gets redirected because a 401 Status code automatically triggers the ASP.NET framework to redirect the user to the Login page. This is true even when making an Ajax request.

Summary

In this blog post, I described how you can use ASP.NET Identity in an ASP.NET 5 app. I demonstrated how you can create users automatically when an ASP.NET app starts. Next, I showed you how you can pass user claims information from the server (ASP.NET) to the client (AngularJS). We used the CanEdit claim in our AngularJS app to hide or display the movie edit, delete, and add buttons.

In my next blog post, I am going to focus on using ASP.NET 5 outside of Windows. I want to get the Movies app working on my MacBookPro running OSX Yosemite.

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how to implement both client-side and server-side form validation.

Client-Side Validation

Let’s start with the client-side validation. We’ll use the built-in features of AngularJS to validate the movie add and edit forms.

Here’s the add.html page:

<h1>Add Movie</h1>
<div class="row">
    <div class="col-md-5">

        <form name="formAdd" novalidate ng-submit="add()">

			 <ng-include src="'/partials/_edit.html'"></ng-include>

            <a href="/" class="btn btn-default">Cancel</a>
			<button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
        </form>


    </div>
</div>

And, here’s the edit.html page:

<h1>Edit Movie</h1>

<div class="row">
    <div class="col-md-5">

        <form name="formEdit" novalidate ng-submit="edit()">
            
			<ng-include src="'/partials/_edit.html'"></ng-include>

            <a href="/" class="btn btn-default">Cancel</a>
			<button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
        </form>


    </div>
</div>

The add and edit forms contain the FORM element and the BUTTON elements for the forms. The FORM element includes a novalidate attribute that disables HTML5 validation. This is necessary because the HTML5 validation attributes conflict with the AngularJS validation directives.

Notice that the BUTTON element includes an ng-disabled directive. This directive is used to prevent a user from submitting the form when there are any client-side validation errors.

You’ll notice that both forms use the ng-include directive to include a partial named _edit.html. The _edit.html contains the actual form fields.

<div class="bg-danger validationErrors" ng-show="validationErrors">
	<ul>
		<li ng-repeat="error in validationErrors">{{error}}</li>
	</ul>
</div> 

<div class="form-group">
	<label for="Title">Movie Title</label>
	<input name="Title"
		   type="text"
		   class="form-control"
		   placeholder="Enter title"
		   ng-model="movie.Title"
		   ng-required="true"
		   ng-minlength="3" />
</div>
<div class="form-group">
	<label for="Director">Director</label>
	<input name="Director" 
		   type="text" 
		   class="form-control" 
		   placeholder="Enter director" 
		   ng-model="movie.Director"
		   ng-required="true" />
</div>
<div class="form-group">
	<label for="TicketPrice">Ticket Price</label>
	<input name="TicketPrice" 
		   type="text" 
		   class="form-control" 
		   placeholder="Enter ticket price" 
		   ng-model="movie.TicketPrice">
</div>
<div class="form-group">
	<label for="Release">Release Date</label>
	<p class="input-group" ng-controller="DatePickerController">
		<input type="text" 
			   class="form-control" 
			   datepicker-popup 
			   ng-model="movie.ReleaseDate" 
			   is-open="opened" />	
		<span class="input-group-btn">
			<button type="button"
					class="btn btn-default"
					ng-click="open($event)">
				<i class="glyphicon glyphicon-calendar"></i>
			</button>
		</span>
	</p>
</div>

The _edit.html form contains fields for the movie Title, Director, Ticket Price and Release Date. AngularJS directives are used to perform the following validation:

• Title – Required, Must be at least 3 characters.

• Director – Required.

• TicketPrice – Required.

If validation fails, then the ng-invalid CSS class is applied to the field and the field appears with a red background.

input.ng-invalid.ng-touched {
    background-color: #FA787E;
}

input.ng-valid.ng-touched {
    background-color: #78FA89;
}

I ran into one minor wrinkle when I created the _edit.html partial. When the partial was requested from the server, the web.config file that I created in part 3 of this blog series redirected the request to the index.html page and I got an infinite regression. To flatten this wrinkle, I had to exclude the /partials/ folder from the path rewrite.

<!-- from http://stackoverflow.com/questions/25916851/wrapping-staticfilemiddleware-to-redirect-404-errors -->

<configuration>
<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <rewrite>
    <rules>
      <!--Redirect selected traffic to index -->
      <rule name="Index Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
		  <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/partials/" negate="true" />
		</conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Updating the Movie Model

Client-side validation is only one half of the validation story. The other half of validation is handled by the ASP.NET 5 framework.

Here’s what the updated Movie model looks like:

using System;
using System.ComponentModel.DataAnnotations;

namespace MovieAngularJSApp.Models
{
    public class Movie
    {
        public int Id { get; set; }

		[Required(ErrorMessage="Movie Title is Required")]
		[MinLength(3, ErrorMessage="Movie Title must be at least 3 characters")]
		public string Title { get; set; }

		[Required(ErrorMessage = "Movie Director is Required.")]
        public string Director { get; set; }

		[Range(0, 100, ErrorMessage ="Ticket price must be between 0 and 100 dollars.")]
		public decimal TicketPrice { get; set; }

		[Required(ErrorMessage="Movie Release Date is required")]
		public DateTime ReleaseDate { get; set; }
	}
}

Notice that validation attributes are applied to the properties of the Movies model. For example, the [Required] and [MinLength] attributes are applied to the Title property.

Updating the Movies Database

Because I made changes to the Movie model, I need to update the database to match the new model. I opened up a Command Prompt, navigated to the project folder and ran the following two commands:

k ef migration add movieProps
k ef migration apply

Unfortunately, the second command threw an exception because I was trying to add a DateTime column to the existing Movies database table. Because the table already contains data, I got the exception.

The easiest fix for this issue is to drop the database. I found the MoviesDatabase.mdf and MoviesDatabase_log.ldf in my c:\users\stephen folder and deleted the two files. When I ran the k ef migration apply command again, everything worked fine.

Updating the Server Controller

The next step is to update the Web API controller on the server. The modified MoviesController looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;
using MovieAngularJSApp.Models;


namespace MovieAngularJSApp.API.Controllers
{
    [Route("api/[controller]")]
    public class MoviesController : Controller
    {
		private readonly MoviesAppContext _dbContext;

		public MoviesController(MoviesAppContext dbContext) 
		{
			_dbContext = dbContext;
		}

        [HttpGet]
        public IEnumerable<Movie> Get()
        {
			return _dbContext.Movies;
        }


        [HttpGet("{id:int}")]
        public IActionResult Get(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			if (movie == null) {
				return new HttpNotFoundResult();
			} else {
				return new ObjectResult(movie);
            }
		}


        [HttpPost]
        public IActionResult Post([FromBody]Movie movie)
        {
			if (ModelState.IsValid)
			{
				if (movie.Id == 0)
				{
					_dbContext.Movies.Add(movie);
					_dbContext.SaveChanges();
					return new ObjectResult(movie);
				}
				else
				{
					var original = _dbContext.Movies.FirstOrDefault(m => m.Id == movie.Id);
					original.Title = movie.Title;
					original.Director = movie.Director;
					original.TicketPrice = movie.TicketPrice;
					original.ReleaseDate = movie.ReleaseDate;
					_dbContext.SaveChanges();
					return new ObjectResult(original);
				}
			}
			return new BadRequestObjectResult(ModelState);
			
		}


		[HttpDelete("{id:int}")]
        public IActionResult Delete(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			_dbContext.Movies.Remove(movie);
			_dbContext.SaveChanges();
            return new HttpStatusCodeResult(200);
        }


    }
}

Notice that the Post() method (called by both the Add and Edit forms) checks ModelState. If ModelState is not valid then the following line of code is executed:

return new BadRequestObjectResult(ModelState);

The BadRequestObjectResult action result returns all of the validation error messages in ModelState to the client. The BadRequestObjectResult also returns a 400 Bad Request status code.

Here’s what the response looks like in Chrome Developer Tools:

Be warned that the BadRequestObjectResult is not included in Beta 2 of the ASP.NET 5 framework. You need to switch to Beta 3. I describe how to use the Nightly Builds of ASP.NET 5 in the following blog post:

http://stephenwalther.com/archive/2015/01/15/upgrading-visual-studio-2015-preview-to-asp-net-5mvc-6-rc

Updating the Client Controllers

The very final step is to update the client-side controllers to display any validation errors returned from the server.

The moviesControllers.js file below contains updated MoviesAddController and MoviesEditController functions.

(function () {
    'use strict';

    angular
        .module('moviesApp')
        .controller('MoviesListController', MoviesListController)
        .controller('MoviesAddController', MoviesAddController)
        .controller('MoviesEditController', MoviesEditController)
        .controller('MoviesDeleteController', MoviesDeleteController)
        .controller('DatePickerController', DatePickerController);

    /* Movies List Controller  */
    MoviesListController.$inject = ['$scope', 'Movie'];

    function MoviesListController($scope, Movie) {
        $scope.movies = Movie.query();
    }

    /* Movies Create Controller */
    MoviesAddController.$inject = ['$scope', '$location', 'Movie'];

    function MoviesAddController($scope, $location, Movie) {
        $scope.movie = new Movie();
        $scope.add = function () {
        	$scope.movie.$save(
				// success
				function () {
					$location.path('/');
				},
				// error
				function (error) {
					_showValidationErrors($scope, error);
				}
			);
        };

    }

    /* Movies Edit Controller */ 
    MoviesEditController.$inject = ['$scope', '$routeParams', '$location', 'Movie'];

    function MoviesEditController($scope, $routeParams, $location, Movie) {
        $scope.movie = Movie.get({ id: $routeParams.id });
        $scope.edit = function () {
        	$scope.movie.$save(
				// success
				function () {
					$location.path('/');
				},
				// error
				function (error) {
					_showValidationErrors($scope, error);
				}
			);
        };
    }

    /* Movies Delete Controller  */
    MoviesDeleteController.$inject = ['$scope', '$routeParams', '$location', 'Movie'];

    function MoviesDeleteController($scope, $routeParams, $location, Movie) {
        $scope.movie = Movie.get({ id: $routeParams.id });
        $scope.remove = function () {
            $scope.movie.$remove({id:$scope.movie.Id}, function () {
                $location.path('/');
            });
        };
    }

	/* Movies Delete Controller  */
    DatePickerController.$inject = ['$scope'];

    function DatePickerController($scope) {
    	$scope.open = function ($event) {
    		$event.preventDefault();
    		$event.stopPropagation();

    		$scope.opened = true;
    	};
    }


    
	/* Utility Functions */

    function _showValidationErrors($scope, error) {
    	$scope.validationErrors = [];
    	if (error.data && angular.isObject(error.data)) {
    		for (var key in error.data) {
    			$scope.validationErrors.push(error.data[key][0]);
    		}
    	} else {
    		$scope.validationErrors.push('Could not add movie.');
    	};
    }

})();

Notice that both the MoviesAddController and MoviesEditController functions now include an error callback. When a 400 Bad Request is returned from the server, the error callback is invoked and the _showValidationErrors() function is called.

The _showValidationErrors() function adds the error messages from ModelState to the $scope.validationErrors array. The contents of the validationErrors array is displayed in the _edit.html form:

<div class="bg-danger validationErrors" ng-show="validationErrors">
	<ul>
		<li ng-repeat="error in validationErrors">{{error}}</li>
	</ul>
</div> 

Summary

In this blog post, I focused on explaining how you can perform validation when using ASP.NET 5 and AngularJS. I explained how you can use AngularJS directives – such as the ng-required directive – to perform client-side validation. I also explained how you can take advantage of ModelState and the BadRequestObjectResult when validating data submitted to the ASP.NET Web API.

In the next blog post, I discuss ASP.NET 5 security.

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how to use Entity Framework 7 to persist the movie data to a database.

Adding the Entity Framework NuGet Packages

Before you can use the Entity Framework, you must add the Entity Framework 7 NuGet packages to your project. Ensure that your project.json file includes the following two dependencies (you’ll get Intellisense while entering the names of the packages and their versions).

"EntityFramework.SqlServer": "7.0.0-beta2",
"EntityFramework.Commands": "7.0.0-beta2",

After you complete this step, the Entity Framework packages should appear under References:

Creating the Model and DbContext

Next, we need to create our Movie model class. This class represents the entity that we want to store in the database. Add the following Movie.cs class to your Models folder:

namespace MovieAngularJSApp.Models
{
    public class Movie
    {
        public int Id { get; set; }

        public string Title { get; set; }

        public string Director { get; set; }
    }
}

We also need to create an Entity Framework DbContext class. We create this class when using Entity Framework 7 in exactly the same way as we created this class for previous versions of the Entity Framework.

using Microsoft.Data.Entity;

namespace MovieAngularJSApp.Models
{
    public class MoviesAppContext:DbContext
    {

		public DbSet<Movie> Movies { get; set; }

	}
}

Registering the Entity Framework Services

Now that we have our DbContext class, we need to register the DbContext with our application services. Modify your Startup.cs file so it contains the code for registering the Entity Framework in the code below:

using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;
using Microsoft.Data.Entity;
using MovieAngularJSApp.Models;
using Microsoft.AspNet.Hosting;
using Microsoft.Framework.ConfigurationModel;



namespace MovieAngularJSApp
{
	public class Startup
	{
		public Startup(IHostingEnvironment env)
		{
			// Setup configuration sources.
			Configuration = new Configuration()
				.AddJsonFile("config.json")
				.AddEnvironmentVariables();
		}

		public IConfiguration Configuration { get; set; }


		public void ConfigureServices(IServiceCollection services)
		{
			services.AddMvc();

			// Register Entity Framework
			services.AddEntityFramework(Configuration)
				.AddSqlServer()
				.AddDbContext<MoviesAppContext>();
		}

		public void Configure(IApplicationBuilder app)
		{
			app.UseMvc();
        }

	}
}

The database connection string is loaded up from the Config.json file (notice the constructor in the Startup.cs file). Here is what the Config.json file looks like:

{
    "Data": {
        "DefaultConnection": { 
            "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=MoviesDatabase;Trusted_Connection=True;MultipleActiveResultSets=true"
        }
    },
    "EntityFramework": {
        "MoviesAppContext": {
            "ConnectionStringKey": "Data:DefaultConnection:ConnectionString"
        }
    }
}

Updating the MoviesController

Because we registered our MoviesAppContext class as a service, we can take advantage of the built-in ASP.NET 5 Dependency Injection framework to use the MoviesAppContext in our MoviesController. Notice that the MoviesAppContext class is added to the MoviesController using constructor dependency injection in the code below:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;
using MovieAngularJSApp.Models;


namespace MovieAngularJSApp.API.Controllers
{
    [Route("api/[controller]")]
    public class MoviesController : Controller
    {
		private readonly MoviesAppContext _dbContext;

		public MoviesController(MoviesAppContext dbContext) 
		{
			_dbContext = dbContext;
		}

        [HttpGet]
        public IEnumerable<Movie> Get()
        {
			return _dbContext.Movies;
        }


        [HttpGet("{id:int}")]
        public IActionResult Get(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			if (movie == null) {
				return new HttpNotFoundResult();
			} else {
				return new ObjectResult(movie);
            } 
		}


        [HttpPost]
        public IActionResult Post([FromBody]Movie movie)
        {
			if (movie.Id == 0)
			{
				_dbContext.Movies.Add(movie);
				_dbContext.SaveChanges();
				return new ObjectResult(movie);
			}
			else
			{
				var original = _dbContext.Movies.FirstOrDefault(m => m.Id == movie.Id);
				original.Title = movie.Title;
				original.Director = movie.Director;
				_dbContext.SaveChanges();
				return new ObjectResult(original);
			}
        }


        [HttpDelete("{id:int}")]
        public IActionResult Delete(int id)
        {
			var movie = _dbContext.Movies.FirstOrDefault(m => m.Id == id);
			_dbContext.Movies.Remove(movie);
			_dbContext.SaveChanges();
            return new HttpStatusCodeResult(200);
        }


    }
}

Performing Database Migrations

After we complete all of the steps above, our application still won’t work. If we run the Movies app then we will get an error message about not being able to open the MoviesDatabase.

Unlike previous versions of the Entity Framework, the Entity Framework 7 does not support database initializers. Instead, you are encouraged to use Database Migrations.

There are two ways to use Migrations with ASP.NET 5: from a Command Prompt or from the NuGet Package Manager Console. You can read the details about each approach by reading Brice Lam’s blog at the following addresses:

http://bricelam.net/2014/10/22/ef7-nuget-commands.html
http://bricelam.net/2014/09/14/migrations-on-k.html

Here, I used the Command Prompt approach and I executed the following two commands from the same directory that contains my project.json file:

k ef migration add initial
k ef migration apply

After you execute the two ef commands above, a new database named MoviesDatabase will be created. You can see the new database by opening up the Visual Studio SQL Server Object Explorer:

Executing the ef commands above will also add a new Migrations folder to your project.

You now should be able to run the Movies app successfully. When you click the Add button, you should be able to add a new movie to the database. You also should be able to edit and delete movies.

Summary

In this blog post, I focused on using ASP.NET 5 with Entity Framework 7. I explained how you can add the NuGet packages for Entity Framework 7 and register the Entity Framework services in your Startup.cs file. Finally, I showed you how to use Migrations to initialize a new database.

In the next blog post, I will focus on the topic of client-side and server-side validation.

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how to divide your single page app (SPA) into multiple virtual pages. I’ll use AngularJS routing to create distinct list, add, edit, and delete views.

Define the Client-Side Routes

The first step is to define the client-side routes. You define these routes in the same JavaScript file – app.js – in which you created your AngularJS app.

(function () {
    'use strict'; 

    config.$inject = ['$routeProvider', '$locationProvider']; 

    angular.module('moviesApp', [
        'ngRoute', 'moviesServices'
    ]).config(config);

    function config($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
              templateUrl: '/Views/list.html',
              controller: 'MoviesListController'
            })
            .when('/movies/add', {
                templateUrl: '/Views/add.html',
                controller: 'MoviesAddController'
            })
            .when('/movies/edit/:id', {
                templateUrl: '/Views/edit.html',
                controller: 'MoviesEditController'
            })
            .when('/movies/delete/:id', {
                templateUrl: '/Views/delete.html',
                controller: 'MoviesDeleteController'
            });

        $locationProvider.html5Mode(true); 
    }

})();

In the code above, I added 4 routes. For each route I defined a templateUrl that provides the location of the HTML for the route. I also associated each route with an AngularJS controller.

You should also notice that I have added ngRoute as a dependency for the moviesApp. I won’t get any of the routing functionality without adding a dependency on the ngRoute module:

angular.module('moviesApp', [
        'ngRoute', 'moviesServices'
    ]).config(config);

Finally, notice that I enabled html5Mode in the last line of code. Enabling html5Mode allows you to use natural URLs that look like:

https://movies.com/movies/add/

Instead of unnatural hashbang URLs that look like:

http://movies.com/#!/movies/add/

Using html5mode is compatible with any browser that supports the HTML5 History API (IE10+ and every other browser).

Rewrite Requests on the Server

If you navigate to /movies/add and hit the Reload button, then you’ll get a 404 response from the server. You’ll get a 404 error because /movies/add is a client-side route and not a server-side route.

To fix this issue, you need to configure IIS to redirect all requests back to home. Add the following web.config file to your wwwroot folder:

<!-- from http://stackoverflow.com/questions/25916851/wrapping-staticfilemiddleware-to-redirect-404-errors -->

<configuration>
<system.webServer>
  <modules runAllManagedModulesForAllRequests="true" />
  <rewrite>
    <rules>
      <!--Redirect selected traffic to index -->
      <rule name="Index Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>  

Notice that I am also enabling runAllManagedModulesForAllRequests (RAMMFAR). I need to enable RAMMFAR to handle PUT and DELETE requests.

Creating the Client Controllers

We need a separate client controller to correspond to each of our routes. Here’s how the client controllers are defined in the moviesController.js file:

(function () {
    'use strict';

    angular
        .module('moviesApp')
        .controller('MoviesListController', MoviesListController)
        .controller('MoviesAddController', MoviesAddController)
        .controller('MoviesEditController', MoviesEditController)
        .controller('MoviesDeleteController', MoviesDeleteController);

    /* Movies List Controller  */
    MoviesListController.$inject = ['$scope', 'Movie'];

    function MoviesListController($scope, Movie) {
        $scope.movies = Movie.query();
    }

    /* Movies Create Controller */
    MoviesAddController.$inject = ['$scope', '$location', 'Movie'];

    function MoviesAddController($scope, $location, Movie) {
        $scope.movie = new Movie();
        $scope.add = function () {
            $scope.movie.$save(function () {
                $location.path('/');
            });
        };
    }

    /* Movies Edit Controller */ 
    MoviesEditController.$inject = ['$scope', '$routeParams', '$location', 'Movie'];

    function MoviesEditController($scope, $routeParams, $location, Movie) {
        $scope.movie = Movie.get({ id: $routeParams.id });
        $scope.edit = function () {
            $scope.movie.$save(function () {
                $location.path('/');
            });
        };
    }

    /* Movies Delete Controller  */
    MoviesDeleteController.$inject = ['$scope', '$routeParams', '$location', 'Movie'];

    function MoviesDeleteController($scope, $routeParams, $location, Movie) {
        $scope.movie = Movie.get({ id: $routeParams.id });
        $scope.remove = function () {
            $scope.movie.$remove({id:$scope.movie.Id}, function () {
                $location.path('/');
            });
        };
    }

    
})();

Notice that I don’t create a single controller with multiple actions (as I would in the case of server-side MVC). Instead, I create a separate controller that corresponds to the list, add, edit, and delete actions.

Each controller interacts with the ASP.NET Web API with the help of a Movie resource. For example, the MoviesListController retrieves the list of movies from the server by calling Movie.query(). And, the MoviesAddController posts a new movie to the server by invoking movie.$save().

The Movie resource is defined in a module named moviesServices.js:

(function () {
    'use strict';

    angular
        .module('moviesServices', ['ngResource'])
        .factory('Movie', Movie);

    Movie.$inject = ['$resource'];

    function Movie($resource) {
        return $resource('/api/movies/:id');
    }
})();

Creating the Main Layout

The index.html page in the Movies app now works like a Master Page/Layout Page. It contains the content that will be shared with all pages. Here’s the updated content for the index.html page:

<!DOCTYPE html>
<html ng-app="moviesApp">
<head>
    <base href="/">
    <meta charset="utf-8" />
    <title>Movies</title>

    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- AngularJS-->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-cloak>
    <div class="container-fluid">
        <ng-view></ng-view>
    </div>
</body>
</html>

There are three main things that you should notice about my updated index.html page. First, notice that I have added Twitter Bootstrap to my app by grabbing the Bootstrap styles and script from the maxcdn bootstrap CDN.

Second, notice that I have pulled the AngularJS ngRoute module in from the Google CDN with the following tag:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>

Finally, notice that I am using the AngularJS directive (custom element) to mark where I want the content pages to be added to the index.html page. For example, when I navigate to /movies/add then the add.html page will be loaded into the location marked by the directive.

Creating the Virtual Pages

The Movies app has 4 virtual pages for doing CRUD operations:

• list.html – Lists the movies in a grid.
• add.html – Enables you to add new movies.
• edit.html – Enables you to edit existing movies.
• delete.html – Enables you to delete existing movies.

Here’s what the list.html page looks like:

<div>

    <h1>List Movies</h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Title</th>
                <th>Director</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="movie in movies">
                <td>
                    <a href="/movies/edit/{{movie.Id}}" class="btn btn-default btn-xs">edit</a>
                    <a href="/movies/delete/{{movie.Id}}" class="btn btn-danger btn-xs">delete</a>
                </td>
                <td>{{movie.Title}}</td>
                <td>{{movie.Director}}</td>
            </tr>
        </tbody>
    </table>

    <p>
        <a href="/movies/add" class="btn btn-primary">Add New Movie</a>
    </p>
</div>

The list.html page uses the ng-repeat directive to display the list of movies in an HTML table. I styled the table with Twitter Bootstrap.

The add.html page contains an HTML form created with the help of Boostrap:

<h1>Add Movie</h1>
<div class="row">
    <div class="col-md-5">

        <form ng-submit="add()">
            <div class="form-group">
                <label for="Title">Movie Title</label>
                <input name="Title" type="text" class="form-control" placeholder="Enter title" ng-model="movie.Title">
            </div>
            <div class="form-group">
                <label for="Director">Director</label>
                <input name="Director" type="text" class="form-control" placeholder="Enter director" ng-model="movie.Director">
            </div>
            <a href="/" class="btn btn-default">Cancel</a>
            <button type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>
</div>

Notice that the <input> elements include ng-model attributes. These attributes create a two-way data-binding between the form fields and the model. When you click the Submit button, the ng-submit attribute on the <form> element invokes the add() method defined in the controller.

The edit.html page looks very similar to the add.html page:

<h1>Edit Movie</h1>

<div class="row">
    <div class="col-md-5">

        <form ng-submit="edit()">
            <div class="form-group">
                <label for="Title">Movie Title</label>
                <input name="Title" type="text" class="form-control" placeholder="Enter title" ng-model="movie.Title">
            </div>
            <div class="form-group">
                <label for="Director">Director</label>
                <input name="Director" type="text" class="form-control" placeholder="Enter director" ng-model="movie.Director">
            </div>
            <a href="/" class="btn btn-default">Cancel</a>
            <button type="submit" class="btn btn-primary">Save</button>
        </form>


    </div>
</div>

The ng-model attributes applied to the <input> elements cause the form to be prefilled with the property values of the movie being edited. So we get the title “Star Wars” and director “Lucas” automatically.

When you submit the edit form, controller the edit() method is invoked.

Finally, the delete.html page is used to confirm that you really want to delete a movie from the database.

Here’s the contents of the delete.html page:

<div class="alert alert-warning">
    Are you sure that you want to permanently delete the movie
    &quot;{{movie.Title}}&quot;?
</div>

<a href="/" class="btn btn-default">Cancel</a>
<button class="btn btn-danger" ng-click="remove()">OK</button>

When you click the Delete button, the remove() method is invoked.

Summary

In this blog post, I focused on client-side routing using the AngularJS ngRoute module. You learned how to use client-side routing with an ASP.NET 5 app.

Currently, you can’t actually create new movies or edit existing movies. In the next blog post, I’ll explain how you can use Entity Framework 7 to save changes to a database.

I spent a couple of hours today updating Visual Studio 2015 Preview to use the ASP.NET 5/MVC 6 Nightly Build. Because the process was a little tricky, I wanted to write a brief blog entry to document how I did it.

Download Visual Studio 2015 Preview

You can download Visual Studio 2015 Preview from here:

http://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx

Be aware that when you install Visual Studio 2015 Preview, it will use the Beta version of ASP.NET 5 (ASP.NET vNext) and not the Release Candidate version. You’ll need to follow the steps in this blog post to use the Nightly Build.

Configure NuGet

There are two different NuGet feeds that you can use to get the ASP.NET 5 packages:

• Milestone Builds – https://www.myget.org/F/aspnetmaster/api/v2

• Nightly Builds – https://www.myget.org/F/aspnetvnext/api/v2/

If you want to update Visual Studio 2015 to use the Nightly Builds then follow these steps:

1. Open the menu option Tools, NuGet Package Manager, Package Manager Settings.

2. Click the Package Sources entry to view the current NuGet Package Manager sources.

3. Uncheck the source for aspnetmaster.

4. Create a new source for the Nightly Build at aspnetvnext.

You can read more about this on the ASP.NET vNext Wiki:

https://github.com/aspnet/Home/wiki/Configuring-the-feed-used-by-kpm-to-restore-packages

Update MVC 6 to the Release Candidate

If you want to use the latest version of MVC 6 then you need to update your project.json file in the root of your project. Here’s what my updated project.json file looks like:

{
    "webroot": "wwwroot",
    "version": "1.0.0-*",
    "exclude": [
        "wwwroot"
    ],
    "packExclude": [
        "**.kproj",
        "**.user",
        "**.vspscc"
    ],
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0.0-*",
        "Microsoft.AspNet.Mvc": "6.0.0-*"
    },
    "frameworks" : {
        "aspnet50" : {},
        "aspnetcore50": { }
    }
}

Notice that I am using “1.0.0-*” for the version of IIS and “6.0.0-*” for the version of MVC. This will give me the latest versions (the Nightly Build).

Update the KRuntime for your Machine

In order to use the Release Candidate of ASP.NET 5, you need to update the runtime itself. Open up a Command Prompt As an Administrator and execute the following powershell command:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/dev/kvminstall.ps1'))"

Next, run kvm upgrade to install the latest version of the runtime

After you complete this step, run kvm list to view all of the runtimes installed on your machine. You should see the rc1 runtime listed.

Finally, perform a kpm restore to get the latest version of all of the packages.

Read more about this step here:

https://github.com/aspnet/Home/issues/218

Update the KRuntime for Your Project

Next, you need to update your Visual Studio project to use the RC runtime. Follow these steps:

1. Right-click your project in the Solution Explorer Window.

2. Select the KRE-CLR.x86.1.0.0-rc runtime.

3. Click the Save button (the floppy disk).

Summary

After you complete all of the steps above, you should have the latest version of ASP.NET 5 and MVC 6. Your References folder should look like this:

Why go through all of this work to upgrade from the Beta to the Release Candidate? The Release Candidate has lots of interesting new features such as new IActionResults that you can use with controller actions.

Hope this helps!

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how to expose data from your server using the MVC 6 Web API. We’ll retrieve a list of movies from the Web API and display the list of movies in our AngularJS app by taking advantage of an AngularJS template.

Enabling ASP.NET MVC

The first step is to enable MVC for our application. There are two files that we need to modify to enable MVC.

First, we need to modify the project.json file so it includes MVC 6:

{
    "webroot": "wwwroot",
    "version": "1.0.0-*",
    "exclude": [
        "wwwroot"
    ],
    "packExclude": [
        "**.kproj",
        "**.user",
        "**.vspscc"
    ],
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0.0-beta1",
        "Microsoft.AspNet.Mvc": "6.0.0-beta1"
    },
    "frameworks" : {
        "aspnet50" : { },
        "aspnetcore50": { }
    }
}

The project.json file is used by the NuGet package manager to determine the packages required by the project. We’ve indicated that we need the MVC 6 (beta1) package.

We also need to modify the Startup.cs file in the root of our MovieAngularJS project. Change the contents of the Startup.cs file so it looks like this:

using System;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.Framework.DependencyInjection;

namespace MovieAngularJSApp
{
    public class Startup
    {

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseMvc();
        }

    }
}

The ConfigureServices() method is used to register MVC with the built-in Dependency Injection framework included in ASP.NET 5. The Configure() method is used to register MVC with OWIN.

Creating the Movie Model

Let’s create a Movie model class that we can use to pass movies from the server to the browser (from the Web API to AngularJS). Create a Models folder in the root of the MovieAngularJS project:

Notice that you create the Models folder outside of the wwwroot folder. Source code does not belong in wwwroot.

Add the following C# class named Movie.cs to the Models folder:

using System;

namespace MovieAngularJSApp.Models
{
    public class Movie
    {
        public int Id { get; set; }

        public string Title { get; set; }

        public string Director { get; set; }
    }
}

Creating the Web API Controller

Unlike earlier versions of ASP.NET, the same controller base class is used for both MVC controllers and Web API controllers. Because we’ve pulled in the NuGet package for MVC 6, we are now ready to start creating Web API controllers.

Add an API folder to the root of your MovieAngularJS project:

Notice that you don’t add the API folder inside of your wwroot folder. All of your source code – including source code for your controllers – should be located outside of the wwwroot folder.

Next, add a Web API controller by right-clicking the API folder and selecting Add, New Item. Choose the Web API Controller Class template and name the new controller MoviesController.cs:

Enter the following code for the Web API controller:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNet.Mvc;
using MovieAngularJSApp.Models;


namespace MovieAngularJSApp.API.Controllers
{
    [Route("api/[controller]")]
    public class MoviesController : Controller
    {
        // GET: api/values
        [HttpGet]
        public IEnumerable<Movie> Get()
        {
            return new List<Movie> {
                new Movie {Id=1, Title="Star Wars", Director="Lucas"},
                new Movie {Id=2, Title="King Kong", Director="Jackson"},
                new Movie {Id=3, Title="Memento", Director="Nolan"}
            };
        }

    }
}

In the code above, the Get() action returns a list of movies. You can test whether the action is working by starting your app and navigating to /api/movies in your browser. In Google Chrome, you’ll get an XML representation of the movies:

Creating the AngularJS App

We are going to display the list of movies using an AngularJS template. First, we need to create our AngularJS app.

Right-click on the Scripts folder and select Add, New Item. Select the AngularJS Module template and click the Add button.

Enter the following code for the new AngularJS module:

(function () {
    'use strict';

    angular.module('moviesApp', [
        'moviesServices'
    ]);
})();

The code above defines a new AngularJS module named moviesApp. The moviesApp has a dependency on another AngularJS module named moviesServices. We create the moviesServices below.

Creating the AngularJS Controller

Our next step is to create a client-side AngularJS controller. Create a new Controllers folder under the Scripts folder:

Right-click the Controller folder and select Add, New Item. Add a new AngularJS Controller using $scope named moviesController.js to the Controllers folder. Enter the following content for the moviesController.js file:

(function () {
    'use strict';

    angular
        .module('moviesApp')
        .controller('moviesController', moviesController);

    moviesController.$inject = ['$scope', 'Movies'];

    function moviesController($scope, Movies) {
        $scope.movies = Movies.query();
    }
})();

The AngularJS controller above depends on a Movies service that supplies the list of movies. The Movies service is passed to the controller using dependency injection. The Movies service is passed as the second parameter to the moviesController() function.

The moviesController.$inject() method call is required to enable the moviesController to work with minification. AngularJS dependency injection works off the name of parameters. In the previous blog post, I setup Grunt and UglifyJS to minify all of the JavaScript files. As part of the process of minification, all function parameter names are shortened (mangled). The $inject() method call enables dependency injection to work even when the parameter names are mangled.

Creating the AngularJS Movies Service

We’ll use an AngularJS Movies service to interact with the Web API. Add a new Services folder to the existing Scripts folder. Next, right-click the Services folder and select Add, New Item. Add a new AngularJS Factory named moviesService.js to the Services folder:

Enter the following code for moviesService.js:

(function () {
    'use strict';

    var moviesServices = angular.module('moviesServices', ['ngResource']);

    moviesServices.factory('Movies', ['$resource',
      function ($resource) {
          return $resource('/api/movies/', {}, {
              query: { method: 'GET', params: {}, isArray: true }
          });
      }]);


})();

The movieServices depends on the $resource object. The $resource object performs Ajax requests using a RESTful pattern.

In the code above, the moviesServices is associated with the /api/movies/ route on the server. In other words, when you perform a query against the moviesServices in your client code then the Web API MoviesController is invoked to return a list of movies.

Creating the AngularJS Template

The final step is to create the AngularJS template that displays the list of movies. Right-click the wwwroot folder and add a new HTML page named index.html.

Modify the contents of index.html so it looks like this:

<!DOCTYPE html>
<html ng-app="moviesApp">
<head>
    <meta charset="utf-8" />
    <title>Movies</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.js"></script>
    <script src="app.js"></script>
</head>
<body ng-cloak>
    <div ng-controller="moviesController">

        <table>
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Director</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="movie in movies">
                    <td>{{movie.Title}}</td>
                    <td>{{movie.Director}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</body>
</html>

There are several things that you should notice about this HTML file:

• Notice that the <html> element includes an ng-app directive. This directive associates the moviesApp with the HTML file.

• Notice that <script> tags are used to add the angular and angular-resource JavaScript libraries from the Google CDN.

• Notice that the <body> element includes an ng-controller directive. This directive associates the moviesController with the contents of the <div> element.

• Notice that the movies are displayed by using an ng-repeat directive. The title and the director are displayed for each movie.

• Notice that the <body> element includes an ng-cloak directive. The ng-cloak directive hides an AngularJS template until the data has been loaded and the template has been rendered.

When you open the index.html page in your browser, you can see the list of movies displayed in the HTML table.

Summary

In this blog post, we created an AngularJS app that calls a Web API action to retrieve a list of movies. We displayed the list of movies in an HTML table by taking advantage of an AngularJS template.

In the next blog post, I discuss how you can take advantage of AngularJS routing to divide a client-side AngularJS app into multiple virtual pages.

• ASP.NET 5 and AngularJS Part 1, Grunt, Uglify, and AngularJS
• ASP.NET 5 and AngularJS Part 2, Using the MVC 6 Web API
• ASP.NET 5 and AngularJS Part 3, Adding Client Routing
• ASP.NET 5 and AngularJS Part 4, Using Entity Framework 7
• ASP.NET 5 and AngularJS Part 5, Form Validation
• ASP.NET 5 and AngularJS Part 6, Security
• ASP.NET 5 and AngularJS Part 7, Running on a Mac

You can download the code discussed in this blog post from GitHub:

https://github.com/StephenWalther/MovieAngularJSApp

In this blog post, I explain how to setup your ASP.NET 5 project. In particular, I explain how you can setup Grunt to combine and minify your front-end JavaScript files automatically.

Creating the ASP.NET 5 Project

The very first thing that you need to do is to create a new ASP.NET 5 project. In this blog post, I’ll show you how to create a new ASP.NET 5 project using Visual Studio 2015 on Windows (In a future blog post, I’ll discuss how you can setup an ASP.NET 5 project on a Mac on OSX with Sublime).

You can download Visual Studio 2015 (Preview) from the following address:

http://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx

Visual Studio 2015 works fine running side-by-side with earlier versions of Visual Studio.

After you install Visual Studio 2015, select File, New Project. Under the Visual C# templates, select ASP.NET Web Application and name the new project “MovieAngularJSApp”.

Next, select the ASP.NET 5 Empty project template and click the OK button to create the new project.

After you complete these steps, you’ll have an empty ASP.NET 5 project that looks like this:

The layout of an ASP.NET 5 solution is significantly different than earlier versions of ASP.NET. Notice that the solution is divided into two solution folders named Solution Items and src. The src folder contains all of the source code for your project. Currently, the src folder includes our MovieAngularJSApp project.

The MovieAngularJSApp project contains a special folder named wwwroot. The idea here is that the wwwroot folder should contain all of the content of your live website. For example, it includes any HTML files and image assets required for your live website.

You should not place any of your source code in the wwwroot folder. Instead, source code — such as unminified JavaScript files, Less files, MVC controller source code, and C# model classes – should be placed outside of the wwwroot folder.

In particular, you want to create a folder in the root of your MovieAngularJSApp project named Scripts. You’ll create all of your app’s JavaScript files in the Scripts folder. We’ll use Grunt to combine and minify the JavaScript files in the Scripts folder and add the result to the wwwroot folder automatically.

Using NPM to Get the Necessary Packages

Unlike earlier versions of ASP.NET, ASP.NET 5 natively supports three package managers: NuGet, NPM, and Bower.

What is a package manager? A package manager enables you to easily gather together all of the resources that you need to create a project. For example, instead of navigating around the web and downloading project resources such as jQuery, the Entity Framework, Bootstrap, and AngularJS by hand, you can download all of these resources and their dependencies automatically by taking advantage of a package manager.

Previous versions of ASP.NET supported NuGet and you’ll still use NuGet with ASP.NET 5. You’ll use NuGet to manage .NET packages such as ASP.NET MVC and the Entity Framework. You specify the NuGet packages that you need in your project with the project.json file.

ASP.NET 5 also supports NPM packages. This is new and exciting. The NPM package manager was originally created for managing packages for the open-source NodeJS framework (an alternative web app framework to ASP.NET). You use a file named package.json to manage your project’s NPM packages.

Finally, ASP.NET 5 also supports the Bower package manager. Bower is a package manager created by Twitter that is designed to support front-end development. You can use Bower to manage resources such as AngularJS, jQuery, and Bootstrap.

For our Movie app project, we need to use NPM to gather all of the resources that we need to use Grunt. We’ll use NPM to install Grunt and the Grunt plugins that we need. Follow these steps:

1. Right-click your MovieAngularJSApp project and select the menu option Add, New Item.

2. Select NPM configuration file.

3. Click the Add button.

Completing these steps will add a new file to the root of your MovieAngularJSApp project named package.json. Modify the file so that it looks like this:

{
    "version": "0.0.0",
    "name": "MovieAngularJSApp",
    "devDependencies": {
        "grunt": "0.4.5",
        "grunt-contrib-uglify": "0.7.0",
        "grunt-contrib-watch": "0.6.1"
    }
}

In our package.json file, we’ve indicated that we need three NPM packages named grunt, grunt-contrib-uglify, and grunt-contrib-watch. After the name of each package, we’ve specified the version of the package that we need.

Notice that you get Intellisense (autocomplete) support while you edit the package.json file. A matching list of NPM package names and version numbers appear as you type.

After you create the package.json file, a new folder named NPM appears under your project’s Dependencies folder. If you expand the NPM folder then you can see a list of all of the NPM packages that you just added to the package.json file.

Right-click the NPM folder and select Restore Packages to download all of the NPM packages. After you complete this step, the grunt, grunt-contrib-uglify, and grunt-contrib-watch packages will all be installed to a folder named node-modules.

What about Bower?

You can use Bower, as I mentioned earlier, to manage all of the packages that you need for front-end development. For example, you can use Bower to install the AngularJS JavaScript library.

I’m not going to use Bower to install AngularJS in this project because I am going to reference AngularJS directly from the Google CDN instead. I am going to add AngularJS to my project Index.html page like this:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

This is controversial, but I believe that you should always use a CDN for standard libraries such as AngularJS, Bootstrap, and jQuery. Using a CDN provides you with the best performance.

For example, if you visit multiple websites that all reference AngularJS from the same CDN then your browser does not need to download the AngularJS JavaScript library when you visit each website. The browser can retrieve AngularJS from its cache instead.

So I use a CDN for standard libraries such as AngularJS or jQuery that might be used with multiple websites. For app specific files, such as the AngularJS controller files, I use Grunt to combine and minify the files to improve performance.

Using Grunt to Build Your JavaScript Files

Grunt is an open-source tool that you can use to build all of the frontend resources for your project. For example, you can use Grunt to compile your Less or Sass files into CSS. You can also use Grunt to combine and minify CSS and JavaScript files.

In this blog post, I’ll show you how to use Grunt to combine and minify your JavaScript files. We’ll configure Grunt so that it will take all of the JavaScript files from the Scripts folder, combine and minify the files, and save the results to a file named app.js in the wwwroot folder.

Follow these steps:

1. Right-click your MovieAngularJSApp project and select Add, New Item.

2. Select Grunt Configuration file.

3. Click the Add button.

After you complete these steps, your project will contain a new file named Gruntfile.js. Modify the contents of the Gruntfile.js file so that it looks like this:

module.exports = function (grunt) {
    // load Grunt plugins from NPM
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // configure plugins
    grunt.initConfig({
        uglify: {
            my_target: {
                files: { 'wwwroot/app.js': ['Scripts/app.js', 'Scripts/**/*.js'] }
            }
        },

        watch: {
            scripts: {
                files: ['Scripts/**/*.js'],
                tasks: ['uglify']
            }
        }
    });

    // define tasks
    grunt.registerTask('default', ['uglify', 'watch']);
}; 

Our Gruntfile contains three sections. The first section is used to load each of the Grunt plugins that we need from the NPM packages that we configured earlier. We need to use a Grunt plugin named grunt-contrib-uglify and a Grunt plugin named grunt-contrib-watch.

Next, we enter the configuration information for each plugin. The Uglify plugin is configured so that it combines and minifies all of the files from the Scripts folder and places the results in a file named app.js in the wwwroot folder:

uglify: {
   my_target: {
      files: { 'wwwroot/app.js': ['Scripts/app.js', 'Scripts/**/*.js'] }
   }
},

Notice that I use the array [‘Scripts/app.js’, ‘Scripts/**/*.js’] to specify the source files. I want the contents of the app.js JavaScript file to appear in the combined JavaScript file before the contents of any other JavaScript files because the app.js file contains the declaration of my main AngularJS module. In other words, if you want to control the order in which Uglify combines JavaScript files then you need to list the order of your JavaScript files explicitly.

The Watch plugin is configured to watch any changes to the JavaScript files in the Scripts folder with the following code:

watch: {
   scripts: {
      files: ['Scripts/**/*.js'],
      tasks: ['uglify']
   }
}

If any files in the Scripts folder are changed, then the Watch plugin reruns Uglify to generate a new combined and minified app.js file automatically.

The final section of the Grunt file contains a definitions for your tasks. In our Grunt file, we define a single “default” task that runs Uglify and then watches for changes in our JavaScript files.

After you create a Grunt file, you need to run it by using the Visual Studio Task Runner Explorer. Follow these steps:

1. Select the menu option View, Other Windows, Task Runner Explorer.

2. Click the Refresh button in the Task Runner Explorer window to ensure that the tasks for the MovieAngularJSApp appears.

3. Right-click the Default task and select Run.

After you complete these steps, you can verify that Grunt is working by adding a JavaScript file (any JavaScript file) to the Scripts folder. Whenever you modify any JavaScript file in the Scripts folder then a new app.js file is generated in the wwwroot folder automatically.

Summary

In this blog post, I focused on setting up a new ASP.NET 5 and AngularJS project. I configured NPM and Grunt so that my app specific JavaScript files will be combined and minified automatically. In the next blog post, I’ll explain how you can create AngularJS templates that display movies retrieved from MVC 6 Web API.