A high level look at Angular 2

Published on September 03, 2016 in Angular, TypeScript · Read time 23 minutes

Developed by Google, Angular 2 is the newest version of the popular Single Page Application (SPA) framework. Angular 2 is a step in a new direction compared to previous versions, but has keep all the best characteristics and “lessons learnt” to deliver a fast, fully featured and rich ecosystem. About Angular 2 Angular 2 impacts your whole application, or at the least, a section of it, rather than specific pages. Angular 2 is best suited to new (“greenfield”) development, as it can be relatively tricky to migrate legacy code (Angular 1.x code) to the new version. Angular 2 has new concepts, syntax, methodologies, and opinions, but is comparable to as previous versions in the way it works. If you have been following Angular development since “the early days” of beta 1, then its been a very rocky road for you. Even now (this post was written around the release of RC5), the API is still evolving and new features are being added. Whilst this experience has been hard for early adopters, I believe the end result will be a fantastic, easy to use, and performant framework with a lower barrier to entry for all. Overview The purpose of this post is to discuss the core concepts of Angular…

Angular 2 server side paging using ng2-pagination

Published on March 31, 2016 in .NET, TypeScript, Web API · Read time 9 minutes

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this happen, we will utilise n2-pagination , a great plugin, and Web API. I’ve chosen Web API because that is what I’m using in my production app, but you could easily use ExpressJS or (insert your favourite RESTful framework here). Checklist Here is a checklist of what we will do to make this work; Create a new Web API project (you could very easily use an existing project) Enable CORS, as we will use using a seperate development server for the Angular 2 project Download the Angular 2 quick start, ng2-pagination and connect the dots Expose some sample data for testing I will try to stick with this order. Web API (for the back end) Open up Visual Studio ( free version here ) and create a new Web…

TypeScript beginners guide

Published on October 02, 2015 in TypeScript · Read time 8 minutes

TypeScript is a tool that enables you to write better JavaScript. You may have heard that TypeScript is a superset of JavaScript, but what does that mean? TypeScript is JavaScript. If you know JavaScript already, then you already know JavaScript. You can convert an existing JavaScript file to TypeScript simply by changing the file extension. TypeScript has a very low barrier to entry (you can easily write it using Notepad) and has a small learning curve. TypeScript has a transpiler, called tsc which transforms (compiles, if you like) your code from TypeScript to JavaScript. If you use any TypeScript paradigms, then your code cannot be understood directly by a JavaScript execution engine ( V8 for example). You can, however, enable source maps and debug your TypeScript code directly. Developers: “Why should I bother using TypeScript?” When I talk to developers about TypeScript, the first thing they ask me is “Why should I bother using TypeScript?” or “I already understand JavaScript and I’ve been using it for x years, so I don’t feel the need to use it…“. This is a great platform to explain to people why they should use TypeScript. Not because I’m on some personal mission or…

Writing AngularJS 1.x with TypeScript

Published on September 24, 2015 in TypeScript · Read time 32 minutes

AngularJS 1.x is a front end JavaScript framework that has gained huge traction and popularity in the development community. AngularJS greatly simplifies previously hard tasks like two-way data binding, templating, the MVC design pattern, despendency injection and more. Using TypeScript, we can create more robust and scalable AngularJS code to deliver the ultimate user experience whilst avoiding the traditional spaghetti code nightmare that JavaScript applications can often descend into. AngularJS version 1.x is written in JavaScript. Its successor, Angular 2.x, is written using TypeScript. It was originally going to be written in Google’s propriety language AtScript, but the teams have merged the projects and are now working together on TypeScript. All the code for this project is available to view on GitHub . There is also a demo project on GitHub pages . Note : This tutorial assumes you have some knowledge of Angular 1.x. Note : This tutorial tries to stay editor independent, meaning the concepts apply to TypeScript specifically and not to an editor. When necessary, screenshots showing relevant information will be of VS Code . VS Code is a free, cross platform editor hat has…

Using ES6 features with TypeScript

Published on September 18, 2015 in TypeScript · Read time 9 minutes

TypeScript is a transpiler The TypeScript compiler converts your code from TypeScript, which is a subset of JavaScript, to TypeScript. Compiler vs. Transpiler There is some confusion about the difference between a compiler and a transpiler. A compiler takes your code and turns it into something very different, a whole new language. A good example is with a high level language such as C# or Visual Basic. When you write code and build it, the compiler (either csc.exe C# compiler or vbc.exe Visual Basic compiler in this case) takes your code and turns it into Intermediate Language (IL). Example C# code; And the compiled code (as seen using ILDasm.exe); The above code is certainly not C#. The C# has been changed into a whole new language. A transpiler takes your code and changes it. But it’s still in the same language that you started out with. TypeScript is JavaScript, infact, TypeScript is a subset of JavaScript. When the TypeScript compiler runs over your code, it reads in TypeScript (which is JavaScript) and outputs JavaScript. The end resulting language is the same as what you started out with. The following TypeScript code is completely valid; And the resulting transpiled…

Getting started with TypeScript

Published on September 11, 2015 in TypeScript · Read time 6 minutes

This is the 101 tutorial which describes getting started with TypeScript using either the TypeScript Playground , Node.js or VS Code . At its simplest, TypeScript is a programming language that provides optional static typing for JavaScript. TypeScript is JavaScript. Any valid JavaScript is valid TypeScript. The beauty of TypeScript is that you can define types for your JavaScript variables and functions, and get compile time error checking and error reporting. This tutorial focuses on getting started with TypeScript and demostrates the basics to get up and running quickly. TypeScript Playground The quickest, easiest way to get started with using TypeScript is to experiment with the TypeScript playground . The TypeScript playground enables you to write TypeScript code in the browser, and see the resulting compiled JavaScript alongside. First things first, TypeScript doesn’t try to force you to write code in a particular style. In fact, you can write 100% pure JavaScript code in get the same code out at the other end. Try entering the following code in the TypeScript pane on the left; See the output? Identical. You can take advantage of TypeScript is much or as little as you…

TypeScript Tips and Tricks

Published on August 28, 2015 in TypeScript · Read time 7 minutes

Automatically compile TypeScript files when using VS Code If you’re writing TypeScript using Visual Studio, your files are automatically compiled when you save (assuming you haven’t turned this off…the feature is found in the Project Properties > TypeScript Build screen). If you don’t use Visual Studio, and instead are using a lightweight IDE such as VS Code or Sublime Text , you don’t get this feature. Manual compilation First things first, how would you normally compile a TypeScript file to JavaScript? VS Code doesn’t do this out of the box (perhaps the will add this functionality in the future, I’m not sure). You use a task runner . To configure a task runner, open your project that has some TypeScript files, and press Ctrl + Shift + B . A little notification to appear that tells you that no task runner is configured. Click Configure Task Runner . VS Code will create a directory called .settings and add a new JSON file called tasks.json to this directory. Open tasks.json and inspect the default configuration (the one that isn’t commented out, VS Code will show you some other sample configurations that are commented out. Look for the following line; Change this…

What I learnt from using TypeScript "for real"

Published on May 25, 2015 in TypeScript · Read time 6 minutes

I completed my first commercial Greenfield project using TypeScript over plain old JavaScript throughout, and there were some frustrations along the way. TL;DR TypeScript is awesome, for sure, but there needs to be improvements to tooling to streamline the experience. TypeScript is strongly typed of course, but it doesn’t force you to code in this manner, which can result in shoddy code. Tweaking is required to make bundling work properly. Tooling Frustrations When I started the project, I was using Visual Studio 2012 Update 4 with TypeScript 1.0 pre-installed. I was brought in to work on this project on a short term basis, and this is how the machine was set up when I arrived. Normally I wouldn’t choose to use Visual Studio 2012 (I like to use the latest tools where possible) but I decided to just go with it and make do. Once deficiencies in tooling became clear, I did eventually push for an update to Visual Studio 2013 Update 4, which in fairness resolved most of my frustrations. I have a license for JetBrains ReSharper, which has support for TypeScript 1.4 (and indeed that is the default setting when using ReSharper 9). This was actually my first tooling problem. When using…