Chapter I. Angular Introduction

Install

npm install -g @angular/cli

Start a new Project

This command will create a new project inside of the current path that you are

ng new testproject

Initial Structure

Tree Structure

.
├── angular.json
├── package.json
├── package-lock.json
├── public
│   ├── assets
│   │   └── img
│   └── favicon.ico
├── README.md
├── src
│   ├── app
│   │   ├── app.config.server.ts
│   │   ├── app.config.ts
│   │   ├── app.css
│   │   ├── app.html
│   │   ├── app.routes.server.ts
│   │   ├── app.routes.ts
│   │   ├── app.spec.ts
│   │   ├── app.ts
│   ├── index.html
│   ├── main.server.ts
│   ├── main.ts
│   ├── server.ts
│   └── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Generally, Angular always is going to create something like this. This is the regular structure.

In app/ directory we will find the most of the files that we are going to use. in the root of this directory, app files will be generated. app.html will be the html template, we can delete all in that file, because it is just a template, if you desire, you can run it with the command in the section below.

Run an angular server

ng serve

Understanding Components structure

Each component in Angular is generated with other 3 files, these other are files that have an specific role. Let's see in what each one consists.

• Component.html: It is the HTML template for that component.
• Component.css: If you set css as default style template, you will find a file that will save all styles to use only in Component.html.
• Component.ts: It is the main component file, this file stores the class in charge to use variables and dependencies inside of your template, this part is very important because it will allow us use services in the future. We will we that further on.
• Component.spec.ts: It is just created as unitary tests. For now we are not going to see these type of files, but it is important to be aware about that.

Now it's just important we focus in the first three files generated by a Component.

Routes in Angular

All routes of our application are stored in app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [];

Inside of routes we can define all routes that we are going to use in our application. For example:

import { Routes } from '@angular/router';
import { Component } from './Component/component';
import { OtherComponent } from '...';

export const routes: Routes = [
	{path : 'user/login', component : Component},
	{path : 'user/register', component : OtherComponent}
];

If we go to user/login once our server is running, we will see rendered our component, this thanks to HTML and CSS files generated with the main ts Component.

Some need commands

# To create a new Component
ng generate component ComponentName
ng g c ComponentName