How to set up Angular

In this post, we’re going to learn how to set up Angular from scratch using the CLI.

I’m an Angular person by trade. It was the first JavaScript-based framework I learned. Despite the massive jump that happened between Angular.js and Angular 2+, the idea behind Angular itself has changed the way we rapidly develop web applications.

Here is a quick guide on how to set up Angular. This is also the second part of a series aimed at helping you become a solid Angular developer from the ground up.

Part 1 – A Quick Dive Into How Things Fit Together In Angular

All the posts so far in the series: #AngularMasterySeries.

---

Out of the box, Angular has a CLI that will set the basic barebones scaffold for you.

The main difference between Angular and other libraries like React and jQuery is that Angular is a framework. This means that it is a collection of libraries that are bundled together.

These libraries are configured in a way that enables them to work as seamlessly as possible through the Angular structure.

Here is a diagram to help you visualize the structure.

There is a central entryway that boots up everything in the app. If you use the CLI, this central file is called the app.module.ts

If you want to access a library, service or directive, it gets declared in the app.module.ts and then called through an import where it’s needed.

In a typical case, you have a component + view structure – where your logic, service calls and everything else happens in the component and the view renders whatever you end up seeing.

This is the structure that the CLI will generate by default.

What is the CLI?

The Angular CLI is a console that you can install via npm and use it to generate various parts of an Angular app – or the entire Angular app itself.

This means less work from scratch and more time to work on the actual app. It provides you with a standardized boilerplate, meaning you can know what to expect when you move from project to project.

Life as a developer becomes a lot easier when you know what to expect and have a general idea on where things are.

Angular CLI stands for Angular Command Line Interface and does most of the manual heavy lifting for you.

For example, when you add a new component via the CLI, it also automatically adds an import module to the app.module.ts file.

It’s good to note that when you generate a service via the CLI, it doesn’t add it to the app.module.ts file like it does with components.

This is because since Angular 6+ (May 3, 2018), Angular’s recommends a singleton service approach. This is to do with coding and architecture patterns, which is beyond the scope of this post (but more on that later in this series).

How to generate your first app

Generating your first barebones scaffold app with Angular CLI is fairly simple.

First, you install the Angular CLI via npm using the following command:

npm install -g @angular/cli

Then you create a new app using the command ng new

ng new my-app-name-here

This will create a new folder that houses your app. To start it up, navigate your command line over and into the folder.

cd my-app-name-here

To run the application on localhost, use the serve command. The usual localhost is localhost:4200.

ng serve

And that’s basically it! You now have your first ever Angular app up and running.

To create a production-ready build, use ng build and the CLI will bundle and tree-shake everything up for you. You can technically use the current files as it is but it’s not very size efficient and not configured for a live environment.

Notes on ng generate

When you use ng generate, followed by the thing, it creates the necessary files with the correct starting syntax.

Here is a list of things you can use ng generate with:

appShell, application, class, component, directive, enum, guard, interface, library, module, pipe, service, serviceWorker, universal and webWorker

Example syntax:

ng generate component your-component-name-here

For the shorthand version, you can use ng g. If you want to add the component to a specific folder or create a folder for it, simply start the component name with where you want the component to be generated in.

For example:

ng generate component yourFolder/your-component-name

Thank you for reading

Thank you for reading. To help me out (and keep me motivated to write more), please like/share/comment if you’ve found this piece useful.

Part 3 – Understanding @Component in Angular

Alternatively, you can also find all the posts so far in the series through the tag #AngularMasterySeries.