When I started using TypeScript for my Angular applications, I was confused about all the different ways with which you could import other modules.
import './polyfills.ts'; import { Component } from '@angular/core'; import HomeComponent from './pages/home/home-page.component'; import * as _ from 'lodash'; import assert = require('assert');
At first, I thought that as a programmer you could choose whether you wanted to use curly braces or not, but I quickly found out that that was not the case.
It all depends on how the module that you are importing is structured.
I have created an overview of the different ways by which a module can be exported, together with their corresponding import syntax.
Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well.
The examples are from my solution to the first puzzle of Advent of Code 2016 and can be found on GitHub if you want to play around with imports and exports yourself.
Export syntax
When a module needs to export multiple variables, it can use so-called named exports:
Another way that named exports can be done is by specifying what you want to export at the end of the module:
Import Syntax
You can import these modules in two ways.
Either you import everything as one object (sometimes called namespace):
Or, you specify all the individual variables that you want to import:
If you specify the variables, you can also import them under a different name:
Continue reading →
When playing around in Polymer, we encounter iron signals. Besides normal javascript events, this gives us a lot of options for dealing with events. Lets try it all out! We can catch events using the on-event attribute:
1
Continue reading →
Just a small reminder. Javascript allows you to call methods based on their name. So if a DOM element has a addClass and removeClass which both take the same argument we could write:
var someClass = 'some-class';
var hasClass = element.hasClass(someClass);
if(hasClass){
element.addClass(someClass);
} else {
element.removeClass(someClass);
}
Continue reading →
NOTE: this blog post was written for version 0.8 of the Karma test runner. An updated blog post for the new Karma 0.10 can be found here.
For my current project we are using Maven to build our AngularJS application. Furthermore we use Sonar (recently renamed to SonarCube) to monitor our code standards / best practices and unit test coverage. In this blog post we describe how to integrate the Karma (Testacular) test runner with Maven and how to add your AngularJS (or any JavaScript) application to SonarQube.
Continue reading →
Note that this blog is in no way written as a "best practice" or "do it this way" kind of blog. I am not, nor do I aspire to be, the worlds greatest javascript programmer. I do however like my code clear and structured. Now lately some collegues have asked me how I write my code and that in turn prompted this blog. In short the best way to keep your javascript clear is using namespaces. The use of namespacing is very simple and should cause you no problems. As you will come to see it will be both easy and clear for fellow developers to read and modify your code. So yes, if you wish to remain the javascript magician with obscure code that no other developer wants to touch feel free to not use them. Creating a namespace:
var namespace ={
}
Continue reading →
