Creating Angular 1 components in ES2015 syntax

Recently I have been working on transitioning my company’s Angular 1x Single Page Application(SAP) to ES2015 to prepare us to update to Angular 2 in the feature. At work we are using Webpack as our bundler with the Babel 6 loader to transpile our code back to ES5.

Note that the following code assumes that you are using a bundler like Webpack with the appropriate loaders. I will not post my Webpack configuration since you can easily find that information on their site as well as Babel’s. The modules are written in a way that you can easily swap the bundler or transpiler with little modifications to your code.


Creating an Angular controller in ES2015 syntax

export default class SomeController {
    constructor(someDependency) {
        this.someDependency = someDependency;
        this.title = 'The component title';
    someMethod() {

SomeController.$inject = ['someDependency'];

Notice how dependencies are being inject through the constructor method and using $inject. I exposing the dependency by reassigning it to a property with the same name to the this object. That will make accessable in any of the methods using the this keyword.

Creating a component in ES2015 syntax

import SomeController from './somecontroller.ctrl';

const SomeController {
    template: "<h1>{{vm.title}}</h1>",
    controller: SomeController,
    controllerAs: 'vm'

Creating an Angular module as a ES2015 Module

import SomeComponent from './some-component.component';

const SomeModule = angular
    .module('someModule', [])
    .component('someComponent', SomeComponent);

export default SomeModule;


The module becomes the single source where everything that belongs to this module is declared using the Angular interface.  This would also include any type of providers or services. It will also make it much easier to upgrade to Angular 2 because you are creating native classes and object literals when declaring each peace.

One caveat is that the new syntax favors services over factories. You may recall that one of the differences in how they are declared is that factories return an object where services are constructor functions.

Cheers, don’t forget to follow me on Twitter: @JoseInSanJose


Using HTML5 validation to validate URLs

Recently I came across Raymond Camden’s blog post on how to use HTML5 form validation with pure JavaScript. I thought I would write the URL version. I know, I’m totally stealing his code.

Validate URL:

function isValidUrl(s) {
  var elm = document.createElement('input');
  elm.setAttribute('type', 'url');

  elm.value = s;
  return elm.validity.valid;

isValidUrl('http://www.thewaymultimedia.com/'); //true
isValidUrl('www.thewaymultimedia.com/'); // false
isValidUrl('thewaymultimedia'); //false

Sweet, that is pretty simple. Thanks Raymond. Make sure to read Raymond’s blog post, since that’s where I stole the code from. Here is the list of data types you can implement this method for:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Of course, it will only work with modern browsers and not all types are supported across the different browser vendor.


Configure npm to use exact module version and save change to package.json

When you are using NPM it is important to make sure that you install an exact version of a package/module you are using. Not doing so may lead to headaches when the developers maintaining the module make an update with breaking changes, but do not tag the version correctly.

To do so, simply run  npm config set save-exact true

It is that simple. you can also configure NPM to always save any changes to your package.json file.

To do so run: npm config set save-exact true