ASP.NET Core: Create an Angular App


Here I’ll start a series of little tutorials on how to build from scratch a new Angular application with ASP.NET Core and MVC5.

The code used in these tutorials can be found under my git hub project: myClub

Every post has his own dedicated branch, so you can just use  “git checkout <branchname>” to find all the source code of the post you’re interesting in.

1) Create a new MVC core project

To generate a new project we’ll use Yeomen.  Open a commend prompt/bash shell or powershell shell on the location you want to put your new project =>

mkdir myClub

cd myClub

yo aspnet


Choose Web Application Basic and provide a name.


2)          Add Angular to the MVC app

1)      Add Angular, from command line inside you project dir:
bower install angular angular-ui-router –save

Add angular to _layout.cshtml :

<script src=”~/lib/angular/angular.min.js”></script>


3) Create two js scripts under wwwroot:


[snippet id=”111″]


[snippet id=”121″]



4) Add two controllers

myTeam.controller.js & home.controller.js

[snippet id=”131″]


5) Add the two html pages inside the angular app


[snippet id=”141″]


[snippet id=”171″]


6)  Reference the js scripts in _layout.cshtml

[snippet id=”151″]


7)      Add the angular app inside idex.cshtml and move the navbar from _layout.html


[snippet id=”151″]


8)      Test the application


Leave a Reply