Wednesday, 22 April 2015

Creating a Configuration Directive in AngularJS

I have been using AngularJS for a while now and for me anyway it’s one of the easiest JavaScript frameworks around for data binding, but I find that there is one key issue with all of these – injecting configuration.

Now I have seen a few ways of doing this either by switching out script files, which can get confusing when the all the scripts get minified, or by writing script out on the page, and I think that just looks messy.  So I said to myself that there must be an nicer way and I came up with a directive to inject any configuration into an AngularJS application.

I wanted a simple directive that I can be used in jQuery as at the time it was going into an a web application that was jQuery based and being moved to AngularJS so I decided to use the following structure:



This structure would enable a directive to be built around the word ‘config’ and also let jQuery pick up on it. The key part to this is the ‘link’ function in the directive, looping through all the attributes and assigning them to an object property.

The link function would have to look at every attribute in the html element which started with the word ‘config’ and add a value, with the given cased config name, to an angular value variable. So config-some-other-number would become someOtherNumber. This is made easy with JavaScript’s object notation.

The resulting directive looks like this:



So with that in place its just a case of creating the app value and injecting it into the directive.  Here is a gist of a simple demo with has this functionality.



Happy coding!

Thursday, 14 November 2013

Creating a Support Ticket System with nLog


When the idea of Trekking for Charity came about we knew that any system is only as good as the team behind it. By that I don’t mean solely the development of the project but the support we give to our members. What we needed is a way that a user of the site could raise a support ticket whenever they encounter an error in the system.  This had to be done in such a way that we could track their support ticket straight back to the error that happened when they raised it. Trekking for Charity uses NLog for all it’s event logging, I find it easy to use, extend and implement and is also fairly well documented.  You can read more about NLog over at nlog-project.org. The support ticket system had the following requirements:
  • All errors in the system can be raised as tickets
  • Tickets must be related to an event in the log
  • Tickets should be raised by the user without ever seeing an error code.
So this raised an issue, normally event logging is a one way event, i.e. an exception occurred then that is written to the log.  What we needed was some kind of Id of the record in the database so that a ticket has a relevant error log about it.  What we wanted to do was use the Id from the database but that wasn’t an option.  Through the use of targets and renderers NLog allows for a value we give it to be push into the database and so we can create our tickets against that value. In this part I will go thought the steps of setting up a simple event log database with ASP.Net MVC 4 and you can find the example project here on bitbucket.org. For this all errors will be logged to the database. Here is the schema I used:
CREATE TABLE [dbo].[Log]
(
 [Id] int NOT NULL PRIMARY KEY IDENTITY(1, 1),
 [TimeStamp] datetime NOT NULL DEFAULT GETDATE(),
 [Host] nvarchar(MAX) NOT NULL,
 [Type] nvarchar(200) NOT NULL,
 [Source] nvarchar(200) NOT NULL,
 [Message] nvarchar(MAX) NOT NULL,
 [Level] nvarchar(50) NOT NULL,
 [Logger] nvarchar(200) NOT NULL,
 [Stacktrace] nvarchar(MAX) NULL
)
Next step is a way of creating the errors to log, for this I have created an empty MVC 4 website and added NLog via nuget. I like NLog and prefer it to log4net and Enterprise Library as it is simple, easy to drop into your project and does require anything to be added to the web/app.config file.  What it does need is a config file of its own, it’s named nlog.config and resides in the root of the site. Here is what is used in the example project:
<?xml version="1.0" ?>
<nlog autoreload="true">
  <targets>
    <target type="Database" name="databaselog">
      <dbprovider>sqlserver</dbprovider>
      <connectionstring>Data Source=(localdb)\v11.0;Initial Catalog=Logging;Integrated Security=True</connectionstring>
      <commandtext>
        INSERT INTO Log
        ([level],[host],[type],[source],[logger],[message],[stacktrace])
        VALUES
        (@level,@host,@type,@source,@logger,@message,@stacktrace);
      </commandtext>

      <parameter name="@level" layout="${level}" />
      <parameter name="@host" layout="${machinename}" />
      <parameter name="@type" layout="${exception:format=type}" />
      <parameter name="@source" layout="${callsite:className=true:fileName=false:includeSourcePath=false:methodName=false}" />
      <parameter name="@logger" layout="${logger}" />
      <parameter name="@message" layout="${message}" />
      <parameter name="@stacktrace" layout="${exception:stacktrace}" />
    </target>
  </targets>
  <rules>
    <logger name="*" minlevel="Info" writeto="databaselog" />
  </rules>
</nlog>
Now for the final part, create the logger instance and log something.  To do this create a controller, give it the name ‘HomeController.cs’ and add this to the class our logger instance.
private static readonly Logger logger = LogManager.GetCurrentClassLogger();
Finally to the Index method add:
logger.Error("My Error");
Now when the site is run an error generated in the log because there isn’t a view for that action, but when in the database there is a log that was created. Just like this:



In the next part in this series I will talk about the steps we took to put in place a system that logs every error which happens in the system.

Wednesday, 13 November 2013

Debugging in Visual Studio with IIS Express and AttachTo

Anyone who has ever created a web project in Visual Studio knows that running the debugger can be a long and painful process with apparent lengthy times between starting the debugger and the site finally showing.

I have personally experienced recently when working with Orchard.  Orchard is a brilliant CMS but if your running it from the original source it contains over 60 projects and whilst some of those are tests the debugger will still takes a long time to run especially on slower PCs.

With the introduction of WebMatrix and IIS Express by Microsoft developers where about to turn any folder into a website without the need of having the IIS service installed and running. I’m not going the details of WebMatrix, but if you want to know more there is the official page located here.

AttachTo is a great little plugging made for Visual Studio 2010/2012 and is used to attach Visual Studio to the IIS or IIS Express process.  With two clicks or a custom assigned keyboard shortcut the debugger is attached and with a simple refresh of the webpage the site is hooked in. You can download the extension from the Visual Studio Gallery and get the source from github.

So how to do this

  1. Open the site in WebMatix
  2. Build the project in Visual Studio
  3. Click ‘Run’ in WebMatrix
  4. Click Tools > Attach to IIS Express in Visual Studio
  5. Refresh the web page
Happy debugging!