I needed to update my resume, maintenance was long overdue. I decided to make an Angular 2 app and put it on my portfolio site.
Take a look at the result: http://henrik.laueriksson.com/cv/
Take a look at the code: https://github.com/hlaueriksson/cv
N.B. The CV is in Swedish.
Angular 2.0.0 was released two weeks ago.
Read the docs at: https://angular.io
To get started you need to install:
I’m writing this on a Mac, so installing the prerequisites was easy.
(On a side note, installing Jekyll on Mac OS X was also way easier than on Windows)
Angular 2 apps consists of:
I’m using Visual Studio Code as my editor. It does a good job with TypeScript, HTML and CSS.
To make Angular 2 development less painful, use the Angular-CLI tool.
Read the docs at: https://github.com/angular/angular-cli
With Angular-CLI you don’t need a build script or a task manager. No need for Gulp or Grunt anymore!
Here follows the account of what I did to write my CV app…
Generate a new project with
ng new cv:
- create all files needed to get started
- initialize git
- install npm packages
Check out the automated commit with
Run a development server with
Then you can browse
Run unit tests with
Run end-to-end tests with
ng g component foo
ng g service foo
ng g class foo
I generated three components, one service and one class.
Read more about scaffolding in the angular-cli README.
After the scaffolding, the actual coding began…
- The development server runs with a file watch. Just save the file you are working on in the editor. The code is then transpiled and bundled. The browser reloads automatically. This is awesome!
- Specs end up in the same folder as the production code. It makes it easy to navigate the editor.
- Components can have their own CSS files. This makes styling very modular.
- Refactoring support in Visual Studio Code is lacking.
- Googling on errors will lead you to Stack Overflow, but the answers may be for a beta or release candidate of Angular 2. Then you are out of luck.
Run tslint with
And then fix your mistakes :)
I build my prod dist with
ng build --prod --bh /cv/
All builds make use of bundling
will also make use of uglifying and tree-shaking functionality.
I need to set the
--bh flag to update the
base href, because I’ll host the app in a subfolder on http://henrik.laueriksson.com/cv/
A really cool feature is direct deployment to GitHub Pages. I didn’t try this, maybe next time.
Try Angular 2! You will learn something new if you are a backend developer like me.