Learning Angular third edition chapter 1 note

1. source code

https://github.com/PacktPublishing/Learning-Angular--Third-Edition

2. Node

Node.js is a JavaScript runtime built on top of Chrome's v8 JavaScript engine.

node -v

Npm is a software package manager that is included by default in Node.js. 

npm -v

npm install -g @angular/cli@10.0.0

ng version

3.

ng new my-app

ng serve

http://localhost:4200

app.component.ts is the landing page and the main component of the application.

Each web application has a main HTML file. For an Angular application, this is the index.html file

When the Angular CLI finds a tag that is not a known HTML element, such as app-root, it starts searching 

through the components of the application tree. 

Angular organizes components into self-contained blocks of functionality called modules. An Angular application 

has at least one main module called AppModule, as a convention.

Angular components should be registered with a module so that they are discoverable by the framework.

The declarations property is the place where we define all components that exist inside a module.

As soon as the application knows about all of the available components that it can search, it needs to identify 

which element tag belongs to which component. That is, it needs to find a way to match the tag with a component.

Angular matches HTML tags with components via a selector. It is the name that you give to a component so that it 

is correctly identified in HTML:

selector: 'app-root'

<span>{{ title }} app is running!</span>

The {{ }} syntax is one example of the Angular template language, called interpolation. It reads the title property 

of the component class, converts its value to text, and renders it on the screen.

4. main.ts

The starting point of an Angular application is always a module. The main task of the bootstrapping file is to 

define this module. It calls the bootstrapModule method of browser platform and passes AppModule as the entry point 

of the application.

5. Install VS Code extensions:

Angular Essentials

Angular Language Service

Angular Snippets (Type a-component inside the ts file and press Enter)

TSLint

6.

TSLint is a tool that performs static analysis of TypeScript code and enforces readability, maintainability, 

and error checking by applying a set of rules. These rules are defined in the tslint.json configuration file.

VS Code editor settings, such as indentation or spacing, can be set at a user or project level. EditorConfig can 

override these settings using a configuration file called .editorconfig