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.
Shaping up with Angular.js
This is one the finest and free AngularJS webcasts I have seen so far . If you are new to AngularJS development and want to learn AngularJS but have no clue where to start then this is tutorial to go for.
https://www.codeschool.com/courses/shaping-up-with-angular-js .
Thanks to the guys at codeschool to make this fun driven tutorial which is so exciting to watch and learn. 🙂 ❤
AngularJS and Plunker
AngularJS is a powerful JavaScript framework for creating dynamic and interactive applications in HTML. It initially started in Google but now is an open source project.The project main site is at https://angularjs.org/ and the source code can be found at https://github.com/angular/angular.js.
One of the main reasons I have started looking into it is that it based on the MVC framework principle and makes writing JavaScript code a lot more fun.Another useful website related to AngularJS is the https://builtwith.angularjs.org/ where some amazing apps written in AngularJs are show cased and one of the most popular application has to be YouTube on PS3.
Plunker or plnkr is an integrated web development environment and is completely written in AngularJS.The plunkr website also provides us to write plunks(codes) and share it with other developers.
once you click on the launch the editor This is how the editor looks like.
There is also ability to search for popular JavaScript library and refer it in your current plunk.
Another feature I really like is the live preview which is quite handy when you are learning AngularJS as you can see the result of your code change in real-time.
The editor is pretty slick and easy to use and nice to see all the html,css and js file can be accessed from the left pane. There is also the ability to save your plunks online and it can also be download as zip from the top right download icon.
Some of the other features are ability to do real-time collaboration on Plunker and I recommend that if you are going to do any serious AngularJS development then try Plunker first.
Happy Plunkering !!!
Prashant Brall's Blog 