Using AngularJS in ASP.net 5 Project

In this post I will exaplin how to create simple Angular JS application. This will continue with the code written in my last post.
In Scripts folder create a folder called app. In that folder create AngularJS main module. By convention, main module is define in app.js file.

Use IIFE Javascript pattern for define the main module.

Add index.html file into wwwroot. Add AngularJS reference. Also you need to add app.js reference. This is a minified javascript file.

Our target is to show a student list. Therefore, add students folder into app folder. Then create studentListController.js file like below.

We can write an Angular service to load students from Web API. First create services module like below.

Then create studentResource.js file in resource folder. The code should be like below. In here I used built in Angular service for call a web service. This is a angular factory which create resource objects which only works with REST services.

Now we need to add ngResource module to common.services as a dependency.

ngResource module is not provided with angular. So we need to add javascript reference as below.

Let's use the data access component in studentListController. $scope is an object that refers to the application model. We must add dependencies correctly.

In the main module, change code like below for dependency injection.

Index.html file content should change like below. There are several classes added which are from Botstrap.

To have bootstrap functionality, add JS and CSS file references like below.

Run the project, and response would be like;