ASP.NET Core: Create an Angular App


aspnetcore

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

yeomen

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:

app.config.js

[snippet id=”111″]

app.module.js

[snippet id=”121″]

printscreenvscode


 

4) Add two controllers

myTeam.controller.js & home.controller.js

[snippet id=”131″]


 

5) Add the two html pages inside the angular app

home.html

[snippet id=”141″]

myTeam.html

[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

index.cshtml

[snippet id=”151″]


 

8)      Test the application

testpage

Leave a Reply