Angular environment construction and simple experience summary

Introduction to Angular

Angular is an open source web front-end framework developed by Google. It was born in 2009 and was created by Misko Hevery and others. It was later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products.
According to the number of projects, Angular (1.x, 2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x) is the most widely used framework on the Internet.

Angular is based on TypeScript and react. Compared with vue, Angular is more suitable for medium and large enterprise projects.

Regarding Angular versions, Angular officially has unified the naming of Angular 1.x as Angular JS; Angular 2.x and above are collectively referred to as Angular;

Currently the latest version of angular is angular9.x as of December 25, 2019. According to the official introduction, Angular will update a version every few months. The usage of all Angular versions after Angular2.x is the same. This tutorial is also applicable to Angular7.x, Angular8.x, Angular9.x and other future versions...

Essential basics for learning Angular: html, css, js, es6, ts

1. Install the development environment

npm install -g typescript
npm install -g @angular/cli

2. Create a hello-world project

Create a project

ng new angular2-hello-world

View the directory structure of the new project

cd angular2-hello-world
sudo apt install tree
tree -F -L 1

.
├── angular.json
├── karma.conf.js
├── node_modules/
├── package.json
├── package-lock.json
├── README.md
├── src/
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

2 directories, 8 files

View the structure in the src directory

cd src
tree -F

Start the application and view the running results at http://localhost:4200

ng serve

Create a hello-world component

ng-generate component hello-world

Define a new component in hello-world.component.ts

//Import dependenciesimport { Component, OnInit } from '@angular/core';

//Declare the control's selector and related file URLs through annotations
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

//Component data model export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Define the template in hello-world.component.html

<p>mango, hello-world works!</p>

In order to use the newly added components, we put Add the tag to app.component.html.

<h1>
  <app-hello-world></app-hello-world>
</h1>

Execute ng serve to view the execution effect

3. Create a user-item directive to display users

Generate instruction components

mango@mango:~/angular2-hello-world$ ng generate component user-item
CREATE src/app/user-item/user-item.component.css (0 bytes)
CREATE src/app/user-item/user-item.component.html (24 bytes)
CREATE src/app/user-item/user-item.component.spec.ts (641 bytes)
CREATE src/app/user-item/user-item.component.ts (286 bytes)
UPDATE src/app/app.module.ts (585 bytes)

Declare and initialize a name field for the component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
  name: string,

  constructor() { 
    this.name = 'mango';
  }

  ngOnInit(): void {
  }

}

Display the value of the variable name in the template

<p>
    {{name}} welcome into Angular world.
</p>

Add app-user-item to app.component.html and view the browser execution results.

4. Create a user list user-list command

Creating a New Component

mango@mango:~/angular2-hello-world$ ng generate component user-list
CREATE src/app/user-list/user-list.component.css (0 bytes)
CREATE src/app/user-list/user-list.component.html (24 bytes)
CREATE src/app/user-list/user-list.component.spec.ts (641 bytes)
CREATE src/app/user-list/user-list.component.ts (286 bytes)
UPDATE src/app/app.module.ts (677 bytes)

Declare and initialize the names array in the component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  names: string[];
  constructor() { 
    this.names = ['mango', 'pear', 'grap', 'apple'];
  }

  ngOnInit(): void {
  }

}

Recursively traverse the names array in the component's template

<ul>
    <li *ngFor="let name of names">Hello {{name}}</li>
</ul>

Add the component to app.component.html and check the browser execution results.

5. Combining user-item and user-list

Modify the name parameter of user-item to use external input

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
  @Input()
  name!: string;

  constructor() { 
    
  }

  ngOnInit(): void {
  }

}

Modify the template of user-list

<ul>
    <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

Save and view browser execution.

6. Startup process analysis

ng will first look for the main entry point of the program in angular.json, which is src/main.ts

{
            "outputPath": "dist/angular2-hello-world",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }

Check the main.ts file and find that the started Module is AppModule, located in app/app.module.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In app.module.ts, we can see that the components in this module, the dependent external modules, and the AppComponent started as the top-level component are declared through the NgModule annotation;

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { UserItemComponent } from './user-item/user-item.component';
import { UserListComponent } from './user-list/user-list.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent,
    UserItemComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The above is the details of Angular environment construction and simple experience. For more information about Angular environment construction, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

The process of setting up the AngularJS environment for beginners
Angular4 study notes preparation and environment construction project
AngularJs Getting Started Tutorial: Environment Building + Application Creation Example
Angular2 detailed explanation of the steps from setting up the environment to development
AngularJS integrates Springmvc, Spring, and Mybatis to build a development environment
AngularJS Getting Started Tutorial: Building a Learning Environment

<<: Detailed explanation of Docker fast build and Alibaba Cloud container acceleration configuration under Windows 7 environment

>>: Analysis of implicit bug in concurrent replication of MySQL 5.7