Including Google Maps into your AngularJS app

Web programming
I already did this in the past but things change and the plugin I was using has changed too. I use AngularJS with Angular-Bootstrap directives as to save me some time and make the best of Bootstrap stylesheets I'm already using. angular-google-maps is another directive int he same club of bootstrap friends and this is how to include it into your project: Installing packages I'm using bower to manage packages at the front end, so first of all let's install the required packages to make this work. I need the plugin angular-google-maps, which requires angular (obviously), lodash and angular-simple-logger to work. So just make sure you install all required packages using bower: [sourcecode language="js" wraplines="false"] bower install --save-dev angular bower install --save-dev angular-google-maps bower install --save-dev angular-simple-logger bower install --save-dev…
Read More

Upgrading WordPress blogs

Software Development
Once in a while you must do this and, if you end up lazy for years like me, may even feel nightmares about upgrading from version 2.x to version 4.x, luckily upgrading Wordpress is one of the easiest things you can do: Making a backup It's always wise to backup your site before you make such a change. Don't worry, you don't need to backup absolutely everything, but check which things you need to backup depending on your needs: 1. Your posts and comments: which is as easy as going to admin > Tools > Export and save an XML (maybe JSON in future?) file with all the relevant content. Whatever happens now, any wordpress version should be able to recover your most relevant data. 2. Your wp-content: usually you…
Read More

Managing packages with Bower

Web programming
Installing Bower Just do it globally so you can access it from anywhere. You need to have previously installed Node.js in order to install it, and Git in order to use it. npm install bower -g Have in mind you will also need to install it in your TeamCity server as you'll probably want to get the packages from there too. Installing packages Installing a package with bower is as easy as moving to the root folder of your project using the console and executing something like this: bower install angularjs You can also install a concrete version using # bower install angularjs#1.4.9 Or install more than one package with one command: bower install angularjs jquery bootstrap angular-ui Saving installed packages The main idea of bower is to keep track…
Read More

HTML5 caching: Cache API

Web standards
We can manage the browser's cache to save our website as an app in it. App cache file - To config the cache we use something similar to the robots: a txt file listing the urls to cache with some options. - The file must be served as "text/cache-manifest" mime type. To config it on the server use this extension: .appcache - We tell the browser where the file is at the <html> tag of our page using a new attribute: manifest="" <html manifest="myCache.appcache"> - You must include the manifest on each page you want to cache resources. - Without the cache manifest attribute the browser will use the default caching system. How the file is organized CACHE MANIFEST true/false This navigator property allows us to know if the browser…
Read More

AngularJS : Service vs provider vs factory

Web programming
Just copy-pasting this answer from Ben Clinkinbeard: Services Syntax: module.service( 'serviceName', function ); Result: When declaring serviceName as an injectable argument you will be provided the actual function reference passed to module.service. Usage: Could be useful for sharing utility functions that are useful to invoke by simply appending () to the injected function reference. Could also be run with injectedArg.call( this ) or similar. Factories Syntax: module.factory( 'factoryName', function ); Result: When declaring factoryName as an injectable argument you will be provided the value that is returned by invoking the function reference passed to module.factory. Usage: Could be useful for returning a 'class' function that can then be new'ed to create instances. Providers Syntax: module.provider( 'providerName', function ); Result: When declaring providerName as an injectable argument you will be provided…
Read More

WebApi and AngularJS: Mapping parameter objects

Web programming
Looks like the parameter behavior between MVC and WebApi is slightly different, mainly because WebApi can only get one parameter from the Body which forces us to use request models. I am working with Angular resources and I have found certain problems to connect to Web API services due to the different way of thinking or structuring the data. Let's see some workarounds: Sending an array of objects If you try to send an Array, in AngularJS you may assign the Body by forming it into parameters with something like this (just because it's the usual way we add them): [sourcecode language="js" wraplines="false"] myResource.post({ myItems: myItems }) [/sourcecode] Which results in a JSON like this: [sourcecode language="js" wraplines="false"] {myItems: [{"Id": 0, "Name": "Blah"}, {"Id": 1, "Name": "Bleh"}]} [/sourcecode] And this…
Read More

Using dotLess in .Net

Uncategorized
While I had a node.js system built to build my LESS stylesheets and even a less.js client-side generator I found that the client-side doesn't work quick enough on firefox and even the server side isn't the simplest thing when you are working with .Net and end up having the feel you have two parallel systems. So I searched for more options and decided to give another try to dotLess, which gives .Net a handler to use .less files and generate the CSS server-side. Installing dotLess First of all, install dotLess through NuGet: PM> Install-Package dotless That will install the library, add its references and make some changes in the webconfig, unfortunately looks like IIS7 doesn't like one of those changes: This is because IIS 7 uses http handlers from both…
Read More

Quick introduction to SVN

Software Development
SVN or Subversion is a source control repository technology that allows to save code statuses on a centralized server from which the developers can save the current status of their project, merge with what others devs have been doing, create branches of a project to develop new features or solve bugs in an isolated space and finally merge back to the trunk to include the changes into the next release. SVN also has some clients that connect to the centralized repository and help you committing changes into it or getting the latest changes from it: one of them is Tortoise. Getting a Repository You can use Windows explorer to handle everything, so getting a project from the repository is as easy as creating a new folder anywhere in your computer,…
Read More

AngularConnect 2015 London

Software Development
So I’ve been at the AngularConnect Conference these two days and these are some of the things I got from it: TypeScript You know something has become popular when all the speakers using javascript (and in this conf that was around 95% of them) use it. TypeScript is a language made by Microsoft that allows you to use classes and interfaces in javascript (and some other things) and then can be compiled into plain javascript. The reason for it to become that popular is that being able to create interfaces or classes is crucial when developing big apps, I have been finding it increasingly difficult to deal with the codes complexity as my company's project has grown and was starting to worry as it is to grow more, definitely, I…
Read More

First steps with Protractor

Software Development
Once installed in your computer, it's time to start messing with it :) First of all, we will use their websites tutorial test. Create this spec.js file: [sourcecode language="js" wraplines="false"] // spec.js describe('Protractor Demo App', function() { it('should have a title', function() { browser.get('http://juliemr.github.io/protractor-demo/'); expect(browser.getTitle()).toEqual('Super Calculator'); }); });[/sourcecode] That's just a basic test. Then create this config file to set up Protractor: [sourcecode language="js" wraplines="false"] // conf.js exports.config = { framework: 'jasmine2', seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['spec.js'] }[/sourcecode] Starting the webdriver manager To make it run you need to open the console and run the webdriver manager, so open it and exec: webdriver-manager start Executing the tests Now that the webdriver manager is running, open another console window, move to the folder where you created those two files and exec this:…
Read More

Installing Protractor

Software Development
First of all, make sure you have Node.js installed in a newer version than 0.10. Open cmd, exec: node -v If it's not the right one, go to node.js page and get the latest .msi for Windows. Install Python You are going to need to install Python 2.7, just get the installer from Python's download page and follow the steps. To make your life easier, you will need to add python as an environment variable, you can do this manually or check the option "Add python.exe to path" at the "Customize install" screen during the installation: select "Will be installed on local harddrive". Restart your cmd command window (close and open, changes on environment variables may not be effective if not). Note: You may need to restart your computer at…
Read More

Using Google Tag Manager with AngularJS

Software Development, Web programming, Web statistics
One would expect that being Angular a Google product and Google Tag Manager another of their products combining them would be quite simple and straightforward, but I personally had my doubts and not much documentation on how are we supposed to make them work. Should I just paste the code as usual or will that get into conflict with Angular? Is it going to register "page views" whenever I change the routing or not as it's not a standard page view? I checked some things and here are some of my results: Adding Google Tag Manager snippet into the page First of all, I didn't find any problem with just copy-pasting the code before the /body closing tag, but I wanted to angularize it and have everything in one piece…
Read More

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