Routing With Angular JS

In this post I will explain how to set up routing with Angular JS. This will continue with the implementations done in previous post.
In wwwroot folder, create student folder like below. In that folder, create studentListView.html file.

From index.html file, cut html code of table tag and paste it in to studentListView.html You have to modify the code in studentListView.html which helps to have a user friendly interface.

In the index.html file, remove ng-Controller and change ng-app directives like below. Also you need to and angular-route javascript file which supports for routing.

Modify app.js file like below. In each route, we must define templateUrl which provides html file location for that particular route.  At the end, I have enabled html5Mode, which allows to use natural urls.

Now, run the application and it will show list of students like below.

Add welcomeView.html file to the app folder.

Change app.js file like below. In here, I have modified url for Student List.

Change index.html file like below.

Run the application again. For default URL, page would looks like,

When you browse for student list, it will show,

Refresh the students page. This will give 404 error. Reason for that is, in here we are using client side routing and not a server side route.

To get rid from that error add web.config into wwwroot folder like below.

Change StudentsApiController.cs file to retrieve a student by id. 

Add studentDetailController.js file like below. 

Add studentDetailView.html file like below.

You must change routes in app.js file like below.

Change studentListView.html file like below.

Run the application. In the student list click on name. You will see below page.