Introduction to Angular JS — Part 1

This blog is an beginner friendly introduction to Angular 5, covering the major components of Angular, I have worked with so far during my GSoC period. This is the first technical blog, taking through the various parts of building an Angular Application and will help be a guide for future developers to work on my GSoC project! :)

Angular CLI

Angular Command Line Interface (Angular CLI) is one of the easiest ways to get started with building an Angular project from scratch. It is essentially a command line interface, which helps build scalable projects and it handles all the common tedious tasks.

To install Angular CLI we can use npm:

npm install @angular/cli -g

After installing CLI, we can test the version by typing :

ng -v

This will output the current running version on your screen, something similar to my screen, shown below:

Output for ng -v

We are all set now, to start exploring Angular CLI!

Let’s start by exploring what all we can do using Angular CLI, for that we type the command :

ng -h

This gives the following output on the screen :

Great! So let’s now start by creating a new Angular project, using Angular CLI.

We use the following command to perform the following action :

ng new <project_name>

The above command will create a new project by installing the required dependencies. The project in that folder contains:

• The default Angular project
• All dependencies installed in node_modules folder
• Testing files for each components

We can also specify some additional flags like the two I used, in the command below:

ng new <project_name> --style=scss --routing

By default, Angular generates CSS files for every component which is added to the project. By using --style we can change to other CSS preprocessors like SCSS in the above case. This means that every file with .css extension is renamed to .scss extension.

The command line parameter --routing , we specify that a routing module needs to be added to the Angular project. Executing the above command generates an additional file app-routing.module.ts in the src/app folder. More about routing in just a while.

Since we are all set with our new project, let’s go inside now and explore more! :D

Let’s change our current directory and move within the project now.

cd <project_name>

Angular Components

Angular components are the basic building blocks of an Angular application.

To generate a new component in our project, we use the command :

ng generate component <new_component_name>

This generates the following components, within the src/app folder.

<new_component_name>/

• <new_component_name>.component.html
• <new_component_name>.component.scss
• <new_component_name>.component.ts
• <new_component_name>.component.spec.ts

Routing in Angular

Carrying froward from my previous blog https://medium.com/@BaaniLeen/gsoc18-coding-phase-week-1-5267191c3b0d about what Routing is and why the need for routing arose in my GSoC project, to implement routing, in Angular 5, one needs to use components.

Previously using the command line parameter --routingwe have already generated an additional file app-routing.module.ts in the src/app folder.

Also, we have created a new module, as explained above. Let’s now try to link the two of them together & route the current application to the newly generated component!

In the app-routing.module.ts file, in the src/app folder, we add :

1. An import statement to import the new component.

import { <New_component_name> } from './<new_component_name>/<new_component_name>.component';

2. Add the path for the new component to the routes Array in the file.

const routes: Routes = [
  { path: '<new_component_name>', component: <New_component_name> }
];

Use the command ng serve -o and open the link http://localhost:4200/<new_component_name> to see that the output of second component is outputted right underneath the default content.

So yeah! That’s it from my side. We have successfully been able to route to a new component in the Angular Application. This can be used to implement navigation bars, and basically all functionalities in an Angular Application can be broken down into components, enabling the user to modify each of those independently and thus keep the code clean.