Getting started with Angular. Part 2 of 2: your first app

In Part 1 of this mini-series you installed the tools to start developing with Angular.

In this second and last part, you are going to write your very first barebones Angular app.

Photo by Andrea Reiman on Unsplash

Creating a new app

An Angular app is created using Angular CLI: we installed it in Part 1.

1. Fire up Visual Studio Code
2. Open the “Command Palette” (Menu → View → Command Palette), type “terminal”, and choose “Terminal: Create New Integrated Terminal (In Active Workspace)”
3. Now using that terminal go to where you want to work and launch:

ng new angular-for-dads --inline-style --inline-template --minimal --prefix ng4d --style scss --interactive false --skip-git

This may seem a lot at first, but if you are following “Angular for dads” from the start you might remember I’m committed to showing you one way to use Angular and one way only: you decide if it’s worth it to invest more of what little time you have to spare, in learning all the different possibilities and all the whys of the things I show you.

Starting the app

With this, you now have a barebones Angular application. Let’s start it up:

cd angular-for-dads
npm start

Now point your browser (latest available Chrome highly recommended) to http://localhost:4200/

This is what you should see

First steps into development

Let’s tinker a bit with it:

1. Back to Visual Studio Code, open the Command Palette, type “add”, and choose “Workspaces: Add Folder to Workspace…” to — you don’t say — add the application folder to the current workspace
2. Open src/app/app.component.ts, and update it (you should change the text in the template!):

3. Save the file, go check in the browser, and you’ll see Angular CLI has recompiled the app and updated the page for you

Hello there!

Optional: code formatting configurations

Optional but recommended.

In Part 1 you installed an essential extension pack for Visual Studio Code. That included “Prettier” and “Editor Config”.

Go to the GitHub repository I created to accompany this article and copy .editorconfig and .prettierrc.js to the root of your project in order to have automatic code formatting on save (you might also have to enable Format On Save in Visual Studio Code preferences, first).

What’s in store

In the next article, you are going to learn about components: the very heart of Angular!

Previous: Getting started with Angular. Part 1 of 2: tools

Next: Angular components: an intro