Fixing AngularJS + MVC Routing Issues

hashratestore_icon-1Currently, I’m working on a hybrid AngularJS and MVC project, one of the tasks being to get rid of the # symbol from the URL. In pure AngularJS apps, this is very easily done by following the next two steps (and easily googled):

  1. Set up your base href in your index page: <head> <base href=”/”> </head>
  2. Add the following in your angular app config: $locationProvider.html5Mode(true)

 

The problem arises when you are in the .NET stack and using AngularJS with MVC. The above solution will still remove the # from URL, but page refresh won’t work. Why? This happens because MVC knows nothing about AngularJS routing and by following default MVC routing, it will look for an MVC page which doesn’t exist. Continue reading

Create a Valid Number #Angular directive that handles decimal points

angular-webapi-valid-number

The below ‘validNumber’ directive verifies that the input field has a valid number by checking the last key pressed. If it is a valid number it continues the operation, but if not the directive prevents the input action and the character is not inserted in the input box.

 

This directive also handles decimal points. To enable this option, you have to add ‘enable-decimals’ as an attribute in the <input type=”text”> html code and assign ‘true’ or ‘false’ as required. Continue reading

Convert #JSON Object from #AngularJS to a Class Instance in #WebApi

Last Tuesday I had a challenging task. Pass a range of dates from AngularJS to WebApi as a single value, and more importantly, the value must be converted as a class instance. It might be simple for some of you but if you are under a bit of stress, it’s not. At first nothing was passing but don’t despair, I found a cure solution. First of all make sure that the Class fields are all objects (Not strings! Strings don’t work. That was the first mistake). Continue reading

How to set a Default Time when Selecting a Date // AngularJS

angular-date

So I started working with AngularJS a few weeks ago to work on an internal project at my workplace. One of the features needed was to make a date range where the user can select a start date and an end date. The requirements also stated that the default time for the start date should be at 00:01 and the default time on the end date should be 23:59.

For the date range I used the bs-datepicker attribute from angular-strap – this library has all the bootstrap elements packaged for angular – and it works great. How did I solve my problem? Continue reading

Data External Page

Today I had an issue with html duplication when using jQuery mobile and ajax.

What was the issue?

The problem was that when a user submits a particular page, on the new page that loads, the previous page’s html was still visible in the code of the page. Although it wasn’t visible on the new page, it was causing some problems with automatic tests which was finding different controls with the same IDs.

 

Resolution:

The problem was that the source page didn’t have this attribute in the page element: Continue reading

jQuery Tricks Quickie – Select Images by using Alt tags

In jQuery you have multiple selectors to either select single objects or a whole bunch. I needed to select an image by its alt tag, and guess what, there is also a selector for alt tags. You need to do the following:

$(‘img[alt=”My Alt Image”]’)

I needed this so that I could change the class and set the selected image as active, by searching the alt tag as below:

$(‘img[alt=”My Alt Image”]’).addClass(‘.active’);

Something else that might be useful is to revert the active image, to a normal image. Instead of using the alt tag this time you can use the ‘active’ class selector as below:

$(‘.active’).removeClass(‘active’);

Hope this was of help. Buon selectoring 😉

Change Lightbox 0.5 Image Size

Update 2011: For those people who had problems with the below instructions.. please find in on my website here. And when you’re there take a look at my site and see what you think about it 🙂

Lightbox 2 has the functionality to set maximum width and height. But what about previous versions? To set the maximum image width and height for lightbox (version 0.5) you need to do some extra coding yourself. Open the jquery.lightbox-0.5.js file and search for the next pieces of code (in bold below):

    settings = jQuery.extend({
        maxWidth: null,
        maxHeight: null,
    ...

Then search for the next function (in bold) and write copy and paste the code underneath it: Continue reading

Implement “Master Pages” in Java

Found a good blog post on how you can emulate the use of ASP.Net Master Pages in Java,to create the desired layout of the site. Have a look here

ASP.Net | Read Values from Javascript

Today I started checking out some videos about Windows CardSpace and ASP.Net for logging in and I saw how he used javascript to get client side input and use it in ASP.Net in the C# code.

First you need to create a HiddenField on your webForm and name it TokenField (any name would actually do)

<asp:HiddenField ID=”TokenField” runat=”server” />

To set the Hidden Field value in JavaScript use the following code: Continue reading

Online Javascript Compressor

This might help some developers and designers… a Javascript Compressor. It’s extremely useful as it compresses the javascript code resulting in a smaller js file thus a faster loading website.

Thanks to minifyjs.com you do not need to install anything, just load the next website and paste the javascript code form the js file that you need to compress.

The resulting text should be copied in the js file. You can load the website by clicking here.

Happy compressing!!