Archive
Custom filters in AngularJS
In this post I am going to show you how easy it is to write custom filters in AngularJS and for the simplicity of the demo I am going to display a list of cron-jobs in a tabular data. Each job has details like the Id, action etc. and has a status which is represented in numbers like 0,1,2 etc. This may be suitable from a storage or system point of view but is not that user-friendly, so lets write a custom filter to transform numeric values into user-friendly status.
First we start with an AngularJS controller "CronJobsController" and it will be responsible for calling the cronjobs ASP.NET Web API.If the call is successful the returned data is assigned to $scope.jobs object so that we can bind the data to our view.
app.js
var app = angular.module('mainApp', []); app.controller('CronJobsController', function ($scope,$http) { $scope.jobs = []; $http({ method: 'GET', url: '/api/cronjobs' }) .then(function(response) { $scope.jobs = response.data; },function(reason) { $scope.error = reason.data; }); });
Next step is to wire up the "myApp" to the HTML page by using the ng-app directive.
CronJobs.html
<body ng-app="mainApp"> <!--Html omitted for brevity --> </body>
Now I am going to create the view by adding some table mark-up and use bootstrap to format the HTML table. For data binding I’m going to use the ng-repeat directive to enumerate through the jobs and bind the data to the table.
CronJobs.html(cont.)
<div class="row"> <!-- Jobs Controller Scope --> <div class="col-md-12" ng-controller="CronJobsController"> <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Correlation Id</th> <th>Action</th> <th>Created</th> <th>Status</th> </tr> </thead> <tbody> <tr ng-repeat="job in jobs"> <td>{{job.id}}</td> <td>{{job.correlationId}}</td> <td>{{job.action}}</td> <td>{{job.created | date:'dd-MM-yyyy'}}</td> <td>{{job.status}}</td> </tr> </tbody> </table> </div> <!-- End of Jobs Controller Scope --> </div>
Lets run the application and we can see that everything is working perfectly.
Now we are going to build our custom filter "status" which will return a user-friendly status based on the numeric value.
statusfilter.js
/// <reference path="app.js" /> app.filter('status', function() { return function(status) { switch(status) { case 0: return "Not Started"; case 1: return "In Progress"; case 2: return "Completed"; default: return "Unknown"; } } })
Nothing special here a simple switch case statement returning user-friendly text and all is left is to apply this filter to our model’s status property as shown in below code snippet.
<td>{{job.status | status}}</td>
And after applying the filter we can see the user-friendly status is displayed instead of the numbers.
It’s a very simple yet powerful feature and another reason to love AngularJS.
ASP.NET Core – Exceeds 1.15 Million request/s
Congratulations to the ASP.NET Core team for hitting this amazing milestone of 1.15 Million request/s http://www.ageofascent.com/asp-net-core-exeeds-1-15-million-requests-12-6-gbps/ . Now is an amazing time to work with ASP.NET Web API and AngularJS.
OWIN and Web Api
In this post I am going to talk about how to get started with WEB API project with OWIN . As usual I am going to start with File > New Project > ASP.NET Web Application > Empty Solution and run the following Powershell command to get all the necessary OWIN packages from nuget.
PM> Install-Package Microsoft.Owin.Host.SystemWeb
PM> Install-Package Microsoft.Owin.Diagnostics
As you may have noticed the second package is to run OWIN Middleware on IIS but you could easily change that to "OWIN Self host" and spawn the web api on a console application with no dependencies on IIS.
The primary motivation and goals of OWIN specification is to develop web application which are independent of Web Server technology like IIS. Another goal is to move away from the System.Web.dll as it’s a 13-year-old assembly. That time it served it’s purpose as it was designed mainly keeping ASP.NET Web Forms in mind but now has a lot of dead weight when it executes code. We still can’t get away with it but in the ASP.Net vNext it is gone and your web application will run faster and will scale better.
For more information on OWIN please visit the http://owin.org/ website.
Anyways back to OWIN, now we are going to write a start-up class which the OWIN runtime will use it to bootstrap our web application and this is how the start-up code looks like.
Startup.cs
public class Startup { public void Configuration(IAppBuilder app) { app.UseWelcomePage(); } }
This is how the OWIN pipeline identifies the startup routine with the above method signature. As you can see it takes an interface IAppBuilder in which you can plug your own middleware and in the above code we are plugging the welcome page middleware component to display the page. This is the pattern which is used in development where you will develop your own middleware and plug that into the app builder.
Now when we run the application we can see the OWIN "Welcome page "running using IIS Express.
In the next step I am going to add a simple Customer Controller as shown below.
CustomerController.cs
public class CustomerController : ApiController { private List<Customer> customers; public CustomerController() { customers = new List<Customer>(); for (var i = 0; i < 3; i++) { customers.Add(new Customer { Id = i, FirstName = "First" + i, LastName = "Last" + i }); } } // GET: api/Customer public IEnumerable<Customer> Get() { return customers; } // GET: api/Customer/5 public Customer Get(int id) { return customers.FirstOrDefault(c => c.Id == i); } // POST: api/Customer public void Post(Customer customer) { } // PUT: api/Customer/5 public void Put(int id) { } // DELETE: api/Customer/5 public void Delete(int id) { } }
So the controller code is done and let’s wire up the controller into the OWIN pipeline by adding the HttpConfiguration to the OWIN start-up class which has the routing configuration.
Here is the complete start-up class code.
Startup.cs
public class Startup { public void Configuration(IAppBuilder app) { var config = new HttpConfiguration(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional }); app.UseWebApi(config); app.UseWelcomePage(); } }
Lets do some quick tests in order to see if everything is working correctly. I am going to use the POSTMAN extension for Chrome and will execute following GET request.
/api/customer /api/cutomer/1
and with no surprises here is the result of 2 request.
As you can see it is fairly simple to set up OWIN and start using it in a Web api application. Moreover, there are 2 more ways to define the OWIN start-up class. First either you can decorate your with assemblu attribute as shown below
assembly: OwinStartup(typeof(OwinTestingDemo.Startup))]
or you can define it in your web.config as
<appSettings> <add key="owin:appStartup" value="OwinTestingDemo.Startup" /> </appSettings>
The choice of different startup may come handy in case for different environment you may want to run different middleware components.
That’s it for now and in the next post I am going to show how we can simplify testing web api with OWIN.
Prashant Brall's Blog 