Angular 2 Tips for Beginners

Angular 2 is out and if you haven’t, you should definitely check out angular.io, because the most valuable beginner material is in their Getting Started guide and the following Tour of Heroes.

Angular projects require quite a bit of setup with Angular 2, unlike most of Angular 1, which is a little inconvenient if you just quickly want to try out a couple of things and test the framework to see if it fits your needs, luckily there is a angular-cli that creates a boilerplate project for you whenever you feel like it.

Angular CLI

angular-cli-ng-new

Getting started with a fresh Angular project is pretty easy using angular-cli. Basically it takes care of initialising an Angular project including Typescript, webpack bundling and development server support.

npm -g install angular-cli
ng new awesome-project
cd awesome-project
npm i
ng serve

which leaves you with a project that will show you a simple view and has the files that are common for most Angular projects, like the app.components and app.modules files.

(master) % tree src
src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── index.ts
│   └── shared
│       └── index.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.json
└── typings.d.ts

4 directories, 17 files

I must say, angular-cli takes a lot of the setup process away, the only problem is that it’s a little less explicit than having your own starter set and that the webpack configuration isn’t directly exposed.

Angular2 Beginner Video Courses

egghead-io-angular2

As usual, egghead.io courses are a great resource for learning JavaScript frameworks, Angular 2 is no exception and I can only recommend coding along on the basic track, also the first course makes use of angular-cli.

Summary

So far Angular2 has not always been easy to pick up, mostly due to breaking implementation changes throughout the different RCs, so not a lot of material except for the official documentation is up to date. Also, if you haven’t used Typescript before I recommend having a quick stab at a Typescript tutorial first to know what’s Typescript and what’s Angular magic 😉

Leave a Reply

Your email address will not be published. Required fields are marked *