AngularJs modules corrected to support minification

Problem: All the dependency injections in the project I am working on currently do not support JavaScript minification. Minification is the process of removing all the white space and other unnecessary characters from the code, such as comments, new line characters and sometimes block delimiters. This compresses the code without removing any functionality, and because it isn't actually compressed it doesn't need to be uncompressed to be read (therefore both the minified source and the original can be interpreted immediately). - source

I am using Grunt to minify all code, which uses UglifyJS to minify the JavaScript specifically.

Solution: By adding a simple object (keyword) to map the parameter instead of injecting directly into the function. This means that if parameters naming changes it will still be injecting the correct value.

Current code:
Improved code:
All the controllers, directives and factories should be in this format.

Chart.js tooltip cut off

Problem: 

• Using Chart.js to display data but the tooltip has been cut off by the edge of the chart's container:

Apparently it is a bug (https://github.com/nnnick/Chart.js/issues/622).

A couple of options I thought of, including:

• Line break: "At this point in time, it's not possible to add line breaks to a tooltip or axis label." - http://stackoverflow.com/questions/29302392/chartjs-tooltip-line-breaks
• Text wrapping: Apparently the top solution is to hope a solution "magically" happens - https://github.com/nnnick/Chart.js/issues/608
• Adding width, margin, neither worked.
• Updating Chart.js to calculate and move the tooltips to prevent being cut off, however this is something I can't implement for what I'm working on - https://github.com/matt-bradley/Chart.js/commit/9fd40ce65fbcb7fb11f6af1d019001a4718c666e

Solution:

• Increase the size of the canvas using width and height (and also therefore adding margins for the center text). This was not the preferred option, but it works and was quick to implement. Because the size of the tooltip will never be larger than the example given, it's also therefore a robust solution:

How to open a new tab in AngularJs

I have a hyperlink that when clicked, opens a document:
To make the hyperlink open the document in a new tab add:
target="_blank":

Datepicker year range examples

Examples of how to set the year range in AngularJs datepicker:

1900 to present

• yearrange="1900:+0"

Last 20 years

• yearrange="-20:+0"

1950 to 2000

• yearrange="1950:2000"

18 years or older (up to 115 years)

• yearrange="-115:-18"

5 years from the present

• yearrange="+0:+5"

Set the start date on a mobile native keyboard

Setting the minimum allowed date on a datepicker, but when testing for mobile, the iPhone keyboard still lets the user scroll all the way back to the year "1".

I did some research and from what I saw I was using the "min" attribute correctly. I then checked the AngularJs version I am using which is v1.3.2. This is an earlier version compared to most of the forum references I was looking at, and after some further research I realised this earlier version has a different naming attribute for minimum value for datepicker. I therefore changed the attibute from "min" to "min-date" and it now works.

View website in mobile view on your browser

To cover all bases when developing a website, development and testing needs to be included for mobile view.

To view your website without using a device follow these steps:

1. Open the website
2. Press F12
3. Press the mobile icon 2nd from left (in between search icon and "Elements" heading)
4. Navigate to Cookies -> localhost
5. Scroll down to the bottom and find "Name: sc_device, Value: Desktop"
6. Delete that line
7. On the webpage select your desired device
8. Refresh the page

Filtering data displayed in an AngularJs repeat

I recently had trouble when trying to display a list of products in a 2 column grid. I had a list of products and each product had the potential to hold a list of "flexi" products within those products.

The problem was that I only wanted to display the flexi products, and only had access to the parent product list. So, when trying to display them, I had to loop through the products to display the flexis, but I was unintentionally displaying a column for each product regardless of whether it had any flexis:

Code:

I tried a lot of different ways to try and configure the display; I started off with many ng-if/ng-show/ng-hide checks, but I couldn't figure out how to access the data in the scope of the child of the repeat (product in data.Products), only the parent (data.Products) while trying to refine how the parent is displayed. I then moved onto creating new refined lists on the AngularJS side to use instead of data.Products, but no matter what I tried I couldn't display it properly (loops in loops to access the flexi list seemed to be losing scope when displayed).

After some deliberation I thought the best way to do it would be on the .ascx side anyway, so after some research I found a fix:
This article helped solve the issue: http://stackoverflow.com/questions/18644412/angularjs-filter-not-null

Result:

IQueryable collection modification returning null

Scenario: Creating a new IQueryable collection, looping through it and setting a certain value for each item looped through.

Issue: However, when using the collection straight after the loop, the value that had just been set was coming through as null.

Solution: IQueryable doesn't allocate memory as it's a copy - just used for querying against a specific data source. So if modification of properties is desired an object will need to be instantiated instead.


Note: This is a refactored snipped of code for the purpose of this blog only.