Dive into Angular and start swimming …

(Part 1:  installing everything you need to play around with Angular)

 

Angular just another JS popup?

Usually after a question like this you will read a long text and after that the author will give you an answer to the question based on his opinion. For me, as the author, this is not a question anymore. Angular is more than a small JS toolkit. It is a client based JavaScript web framework. And this is all I want to write about the history of Angular and what it is in detail. You can read a lot about it whereever you prefer.

Better then reading a lot of documents is to start, dive into and play around with the technology. If you think this is complicated and time consuming thing, I will show you here an easy way to swim around for the first time and have everything together to build a small application from scratch. Some details I will clarify when they pop up.

Ok, I do not what to start with Adam and Eve. You will need node (v4.x.x. or higher) and npm (3.x.x. or higher) and also git on your local machine.

Let’s start:

Download and create Angular project

You can create a first new project based on the github angular quickstart project.
Clone this repo to your local file system

git clone https://github.com/angular/quickstart.git blogapp

Do some housekeeping, because you cannot commit changes to this repo.

rm -rf .git

Create a new repo. For your testing you can do the following

git init
git add .
git commit -m “Your comment”

If you do not what to use git to clone the base project you can also download it from
https://github.com/angular/quickstart/archive/master.zip

Install your Angular application

First you have to install the project using npm.

npm install

This will take a while – time to get a coffee.
After the coffee you will get a long list of installed packages like

@angular/common
@angular/compiler
@angular/core
…

Run your Angular application for the first time

After this you are ready to start your first angular app!

npm start

This will start the app with the included webserver lite-server and automatically open your default web browser on http://localhost:3000

Install Visual Studio Code

Ok, now you have your first app up and running, but you what to play around with it. For this you will need some IDE, and there are a lot on the marked for Angular.

HINT: Before we start downloading an IDE I will shortly write something about AngularJS and Angular2, which is released and now called Angular only.

In my opinion, the best way to develop Angular is using TypeScript.
TypeScript? One moment – you want to develop Angular applications and now you read something about TypeScript. Angular is developed on TypeScript so it makes sense to use this, but you can develop in JS as well because at the end, the TypeScript compiler tanscompiles your code into JS (in this project to ECMAScript 2015).

Back to the IDE. In my opinion and for the start it is cool to use the free and open source vscode from Microsoft. You can get it under https://code.visualstudio.com/. After you have downloaded and opened it you will see something like the following:

Open your project in VS Code

Open your Angular project now

File –> open …
Browse to your project base dir <path>/<to>/blogapp

and then you will see hopefully this:

What is important for the first dive?

The only files you have to pay attention to are the files in the app folder with the extension ‘*.ts’.  All the other files in the app folder are generated automatically.

HINT: Everytime you will change some file in the app folder the application will automatically rebuild, because the lite-server you ran before is configured in watch mode, which means it is triggered on each change on a file after you saved it.

Touch it, play with Angular for the first time

Let’s change something to see how it works. Open the file app.component.ts which is the base file for your first changes.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})

export class AppComponent  { name = 'Angular'; }

Change:

export class AppComponent  { name = 'Angular'; }

to:

export class AppComponent  { name = 'Christoph'; }

and after saving the file you will see the change immediately in your browser.

Great, right!!

Configure VS Code

I told you before that you only have to take care about the *.ts files. That’s right, all the *.js and *js.map files are the JS file which are transcompiled by the TypeScript compiler building the application you run in the browser.

HINT: If you are not that deep in the JS code and you start to create more components you will get confused about all this files, because every component will automatically create its *.js and *.js.map file and you will have three time more files then you directly work with in the explorer view.
It is easy to hide them in the view by configuring your vscode:

Use show all Commands ‘Shift-CMD-P’ to open the command line on top and type ‘user’

This opens the user settings for vscode.

Add the following to the settings.json file

"files.exclude": {
"**/*.js": { "when": "$(basename).ts"},
"**/*.js.map": { "when": "$(basename)"}
}

And after saving you will imeediatly see that only the *.ts files are visible in the explorer on the left.

… to be continued!