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;

Using Grunt in ASP.net 5 project

We will continue this with the code which I have done in my last post.
What is Grunt? Grunt is an open-source tool that you can use to build all of the frontend resources for your project.
In this demo, I will mainly use Grunt for JavaScript minification.
There are three types of Package Managers in Visual Studio 2015.

• Nuget

We use Nuget for manage .net packages like ASP.net MVC, EntityFramework and etc. We define those packages in project.json file.

• NPM(Node Package Manager)

We can manage NPM packages from this and we have to define those packages in package.json file.

• Bower

This is a front end package manager, which we can use for Angular JS, JQuery, Bootstrap and etc.

First we will define Grunt package in NPM. For that we need to add NPM file like below.

Change the content of package.json file like below. It will add, NPM packages  into the project.

Add Grunt.js file and change content of that file for JavaScript minification process. This code will minify all javscript files in Scripts folder and create app.js file in wwwroot. Uglify combines JavaScript files according to the order they have defined in Grunt Configuration.

Add Scripts folder and add a javascript file into that folder. Open Task Runner in Visual Studio.

Run Uglify command. This will create app.js minified file in wwwroot folder.

It's easier if you bind the Uglify command to automatically run in After Build.

Using Web API in ASP.net 5

In my last post I created a Web Project using ASP.net 5. Now we will create some web api controllers.
First, add ASP.net MVC nuget package to the project.

Then change the Startup.cs class like below.

When you run the application, the browser must open following page, which means your IIS works correctly.

In ASP.net 5, there are two primary concepts.

• Middleware

Middleware is in the HTTP pipeline. When HTTP request comes in it will go through all the middleware according to the order they have defined. After complete that request, response with flows back through the same route.

• Services

Using dependency injection pattern, services are availabled to all middleware components. For example, DbContext, Logger service and etc.

Change the Startup class like below. Above mentioned middleware and Service codes are applied from Startup class. This code has configured to use DbContext using DI pattern.

Create folder named Controllers and add a Web API Controller class like below.

If you have data in your database, then you will be able to see an output like below.

Assume, there was an exception occurred. Change the web api controller code like below.

Change the Startup.cs file content.

When you run the project, you will see a beautiful error handling page which contains lots of details.