1) IDE
I was wondering myself which IDE is the best suited for Angular2.
I’m a big Sublime Text supporter and even tho there’s a Typescript plugin … It didn’t feel perfect with Typescript power.
So I tried with my second favourite editor : Atom (+ Typescript plugin).
Better BUT no support for auto import (maybe it has some now ?) and also, I had to wait 30s before I get any autocompletion.
Then I tried Webstorm as the company I’m currently working at has some licences. It was great and I was really happy for a month. But using an editor that is not free felt … weird. I wouldn’t use it at home for personal projects, I couldn’t recommend it to other people easily. And honnestly, I’m not a super fan of Webstorm interface.
So I gave (another) try to Visual Studio Code that I didn’t find so great when I first tried it few months ago. It has seriously evolved and :
- it’s simple
- it’s complete
– Code
– Debugger (remote –> super powerful)
– Git integration
– Plugin store - it has great great Angular2 support
- intellisense is really awesome
I’m using it since a month and so far, I’m really happy and do not feel the need to change.
Just to help you start with good plugins, here’s mine :
2) Angular 2 : Discover the basics
As you’re familiar with AngularJs, I don’t know how you felt about the official documentation but I couldn’t learn from it. I had to follow many (different) tutorials and then I used to doc once I understood AngularJs.
With Angular2, they understood the challenge to have a great documentation and they pay attention to it since alpha version (even tho it was evolving continuously =) !).
So I’d recommend you to go on https://angular.io and simply read the doc.
It’s well done and is not only for advanced user. You will find good tutorials there !
3) How to use Typescript with Visual Studio Code ?
I’d strongly recommend you to use angular-cli for developing an Angular2 app. Not only for simplicity, but because in a community we need to have a basic starter which gives us the ability to have similar structured repo. So we can understand easily the structure of an other project.
Plus, angular-cli handles Typescript compilation for you and you don’t have to deal with it in command line or from your IDE.
npm i -g typescript
(no need for typings anymore since Typescript 2.0 !)
npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project
Then just run
ng serve
And access to your app at : http://localhost:4200
Angular-cli compiles your Typescript and even your (sccs|sass|less) files.
When you want to deploy your app :
ng serve --prod
Will also minimify JS and CSS.
4) What’s next ?
Once you feel more comfortable with Angular2 in general, I’d strongly recommend you to learn (more) about
- Redux
- RxJs
And once you’re familiar with those concepts, you should start playing with ngrx.
I’ve released an ngrx starter! For those familiar with Redux and willing to discover angular and/or ngrx it might help you get started! I’m sure it might also be a good idea to use this template as a starter for any kind of ngrx project (small, medium or even large!). I tried to describe in the Readme how to use it and there is plenty of comments into the code itself: https://github.com/maxime1992/angular-ngrx-starter