Angular directives and scope

Web programming
When creating directives with angular, you can choose to use the parent's scope, create your own isolated scope for the directive or have an inherited one. Let's see what types of scope we have and how to work with them: Let's start by considering this main controller and template: [sourcecode language="js" wraplines="false"] var app = angular.module("testingDirectives", []); app.controller("mainController", function($scope, $timeout) { $scope.MainValue = "main"; $scope.ValueToOverride = "notOverridden"; $scope.ValueToOverrideOn6 = "notOverridden"; $timeout(function() { $scope.MainValue = "main updated"; }, 1000); }); [/sourcecode] [sourcecode language="html" wraplines="false"] <div ng-app="testingDirectives" ng-controller="mainController"> {{MainValue}} <directive-one></directive-one> <directive-two></directive-two> <directive-three></directive-three> <directive-four custom-att="attribute"></directive-four> <directive-five custom-att="attribute"></directive-five> <directive-six custom-att="attribute" custom-att2="overrided"></directive-six> <directive-six custom-att="attribute" custom-att2="overrided 2"></directive-six> <directive-seven custom-att="attribute" custom-att2="overrided"></directive-seven> <directive-seven custom-att="attribute" custom-att2="overrided 2"></directive-seven> <directive-eight from-parent="{{MainValue}}"></directive-eight> <directive-nine from-parent="{{MainValue}}"></directive-nine> </div> [/sourcecode] Using the parent scope In this case, the directive doesn't have a scope of its own,…
Read More

HTML Emails: GMail Andriod App

Web programming, Web standards
While it looks like most email readers are moving into accepting standards as much as possible GMail has a bit of a weak point when it comes to its Android App (not the website though). I got myself in trouble when trying to add a logotype image centered on the header and with a background color... Centering an element Looks like the CSS property "align:center;" won't make it when trying to align an image to the center of the table cell, instead, using the HTML property "align" on the table/cell does it: [sourcecode language="html" wraplines="false"] <tr> <!-- Logo --> <td align="center"> <a href="http://www.gaydar.net"><img alt="Gaydar" src=".../logo.png" border="0" /></a> </td> </tr> [/sourcecode] But you may not want to center everything inside that cell, you can create a row just for this logo…
Read More

HTML Email tricks and howtos

Web programming, Web standards
Tips to write HTML Emails that I've found. Note this post can be bsolete as email readers are constantly changing and evolving. Background images It is just not possible to add an image as a background at the moment. While most readers will accept it Outlook Office seems to have issues and Hotmail/LiveMSN just doesn't support it. So unless you don't mind some of your users not getting the image at all this doesn't look like a good idea. As a tip: None of the big companies I checked use background images on their emails, this included Amazon, Google, Ebay, HSBC, Channel4, BBC, ... that should give you a hint. Solutions You can use plain colors on the background using a table's BGColor property and the CSS property. Instead of…
Read More

Difference between faking, mocking, and stubbing

Web programming
Quick answer Stub - an object that provides predefined answers to method calls. Mock - an object on which you set expectations. Fake - an object with limited capabilities (for the purposes of testing), e.g. a fake web service. Test Double is the general term for stubs, mocks and fakes. But informally, you'll often hear people simply call them mocks. From Elijah Manor Test stubs are functions (spies) with pre-programmed behavior. They support the full test spy API in addition to methods which can be used to alter the stub's behavior. Mocks (and mock expectations) are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations. A mock will fail your test if it is not used as expected. Source. From Martin Fowler Fake objects actually…
Read More

Checking if an object is empty in EcmaScript5 / Javascript

Web programming
I was getting a JSON response from a server request that can contain just an empty value (this is, nothing, nothing de nothing that we Spaniards say). On checking if the object had anything within I did this which seemed to work... for a while: [sourcecode language="js" wraplines="false"] var d = response.data; var person = new Person(d); /**************/ // inside Person constructor: if (d) { this.Id = d.Id; this.Name = d.Name; ... } ... [/sourcecode] And that worked quite fine, as sometimes I want to instantiate a Person object without giving it any data, that's a null or "undefined" and checking if (d) exists just works. But what if d does exist but it's empty? Coming from the response I have "something", an empty something, it has no properties, no…
Read More

C#.Net DAO Access class template

Web programming
Something I had around there: [sourcecode language="csharp" wraplines="false"] using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; namespace Blabla.Data { public interface IDataAccess { SqlDataReader GetReader(string sql, List<SqlParameter> pl = null); object GetScalar(string sql, List<SqlParameter> pl = null); DataSet GetDataset(string sql, List<SqlParameter> paramsList = null); int ExecuteNonQuery(string query, List<SqlParameter> paramsList = null, CommandType commandType = CommandType.Text, bool avoidTransaction = true); } public class DaoTemplate : IDataAccess { public const string DefaultConnectionString = "DefaultConn"; private SqlConnection GetConnection() { return new SqlConnection(ConfigurationManager.ConnectionStrings[DefaultConnectionString].ConnectionString); } public SqlDataReader GetReader(string sql, List<SqlParameter> paramsList = null) { SqlConnection conex = GetConnection(); try { conex.Open(); SqlCommand cmd = conex.CreateCommand(); cmd.CommandText = sql; cmd.CommandType = CommandType.StoredProcedure; if (paramsList != null) { cmd.Parameters.AddRange(paramsList.ToArray()); } return cmd.ExecuteReader(CommandBehavior.CloseConnection); } catch (InvalidCastException e) { throw (e); } } public object GetScalar(string sql,…
Read More

Using Unicode characters to improve your website!

Web programming, Web standards
Using HTML unicode characters can help you reducing the amount of images on your site, just using the right HTML code and you can get this: ✔ or this ★ Doing that is as simple as adding its unicode code like this: [sourcecode language="html" wraplines="false"] tick: <span style="color:green">✔</span> star: <span style="color:red">★</span> [/sourcecode] To get an idea of which unicode characters you can use just check this W3C list. Though probably what you really want is to have a look at the symbols, the geometric shapes, the arrows or the dingbats. Unicode format Have always in mind that there are more unicode character sets than the standard (UTF-8), like UTF-16. You can make use of other standards by setting it on a meta or on your XHTML declaration tag: [sourcecode language="csharp"…
Read More

Adding Google Maps to angular using RequireJS

Web programming
New method Since I wrote this post many things changed on the plugin and what this post explains isn't valid anymore unless you are still using the old plugin. I wrote another article about how to include Google Maps in your AngularJS App using the new plugin. Navigate to the new method. WARNING: This method is deprecated I was trying to use Google Maps in an Angular application and load all its modules, directives, etc. using RequireJS. This gave me some headache due to this: Google Maps API prefers to be written into the page on document load, so it can use the document.write. But as we are loading it asynchronously, it will require the DOM to be ready to be added. Angular Google Maps plugin requires Google Maps API…
Read More

Avoid event propagation in Angular

Web programming
I had a button inside a box that had an "onclick" feature, which means that both the button and the box had an "onclick" listener. On clicking the box everything worked fine, but on clicking the button the box's listener also fired its event. To avoid this, it seems someone developed an "stopPropagation" in jQuery that you can also use in Angular: [sourcecode language="js" wraplines="false"] app.directive('dontPropagate', function () { /* This directive allows to stop the propagation of an event, so that if DOM element B is inside DOM element A, on clicking B the event is not propagated to A (the parent). You have to add the property "dont-propagate='click'" to B, where "click" is the event you don't want to be propagated. */ return { restrict: 'A', link: function…
Read More

Adding video src with Angular

Web programming
Well, well, well... if you try to add a video to your page and use Angular to set its URL... you may discover that Angular doesn't allow you to do that. This is because Angular blocks some possible hacking attempts like setting manual html to the page or so with a service called $sanitizer, interestingly, Angular allows you to set an image "src" or the href of a link without issues, but blocks you if you try to add the "src" of an HTML5 video element. To be able to add the video URL this way you need to tell Angular that this is a safe operation using Angular's Strict Contextual Escaping Service. There are different ways in which you can make use of such service to solve this: Solution…
Read More

Creating directives with Angular

Web programming
One of the main points of angular consists on adding functionalities to your html elements, so that instead of setting the effects the jQuery way: selecting the element and making that happen or adding a listener, you create an "effect", "functionality" or "behaviour" and give it a name, and then assign it to an element by just writing it on the View. No need to access the view from the controller, only to set the directive. Let's see a quick example: [sourcecode language="js" wraplines="false"] var app = angular.module('myApp', []); app.directive('helloWorld', function ($compile) { return { restrict: 'AE', replace: 'true', template: "<h1>Hello World!</h1>" } }); [/sourcecode] Now just add this HTML: [sourcecode language="html" wraplines="false"] <html ng-app> <body> <hello-world></hello-world> </body> </html> [/sourcecode] That example creates a directive named "helloWorld", and we are…
Read More

Loading scripts using RequireJS

Web programming
With all the front-ending needing so many script libraries, plugins or even frameworks like Angular, the amount of scripts to load and, even more, the order in which they need to be loaded has increased its complexity highly in the last years. To help with this one very useful solution is called RequireJS. So what does RequireJS do? RequireJS will take control of the scripts load order and improve page load, configure their dependencies, etc. To do that, we have three methods: require(), define() and config(). Require() will immediately load the files set, while define() will just "configure" a module that can be called (using require()) and loaded. config() will help on setting some values to make all this easier. (more…)
Read More

Quick Introduction to LESS

Web programming
These are some of the features LESS is offering you: Creating variables You can save a value on a variable and use it later, quite useful to set colors: [sourcecode language="css" wraplines="false"] @myCustomColor: #567; @primaryColor: blue; @secondaryColor: darkblue; .myCustomStyle{ background: @myCustomColor; } .anotherStyle{ color: 'myCustomColor'; } [/sourcecode] Notice you can add the variable by setting it directly or by setting its name. (more…)
Read More