Angular introduction
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, and 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 ( , , , , , , ) is the most used framework online now.
Angular is more suitable for medium and large enterprise-level projects based on TypeScript and react and vue.
Regarding the Angular version, Angular has been named Angular in a unified manner, collectively known as Angular JS; Angular and above are collectively known as Angular;
Currently, the latest version of angular on December 25, 2019. According to the official introduction, Angular will update a version every few months. All future Angular versions will be used the same, and this tutorial is also applicable to , , and other future versions...
Essential Basics for Learning Angular
Essential basics: html, css, js, es6, ts
1. Installation and 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 newly created project
cd angular2-hello-world sudo apt install tree tree -F -L 1
. ├── ├── ├── node_modules/ ├── ├── ├── ├── src/ ├── ├── └── 2 directories, 8 files
Check the structure in the src directory
cd src tree -F
Start the application, you canhttp://localhost:4200View the running results
ng serve
Create hello-world component
ng-generate component hello-world
Define new components in
//Import dependenciesimport { Component, OnInit } from '@angular/core';
//Declare the selector of the control and the related file url through annotation@Component({
selector: 'app-hello-world',
templateUrl: './',
styleUrls: ['./']
})
//Component data modelexport class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Define templates in
<p>mango, hello-world works!</p>
To use the newly added components, we
<h1> <app-hello-world></app-hello-world> </h1>
Execute ng serve to view the execution effect
3. Create user-item instruction to display users
Generate instruction components
mango@mango:~/angular2-hello-world$ ng generate component user-item CREATE src/app/user-item/ (0 bytes) CREATE src/app/user-item/ (24 bytes) CREATE src/app/user-item/ (641 bytes) CREATE src/app/user-item/ (286 bytes) UPDATE src/app/ (585 bytes)
Declare and initialize a name field for the component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-item',
templateUrl: './',
styleUrls: ['./']
})
export class UserItemComponent implements OnInit {
name: string,
constructor() {
= 'mango';
}
ngOnInit(): void {
}
}
Show the value of variable name in template
<p>
{{name}} welcome into Angular world.
</p>
Add app-user-item to view the browser execution results.
4. Create user list user-list instruction
Create a new component
mango@mango:~/angular2-hello-world$ ng generate component user-list CREATE src/app/user-list/ (0 bytes) CREATE src/app/user-list/ (24 bytes) CREATE src/app/user-list/ (641 bytes) CREATE src/app/user-list/ (286 bytes) UPDATE src/app/ (677 bytes)
Declare and initialize the names array in the component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-list',
templateUrl: './',
styleUrls: ['./']
})
export class UserListComponent implements OnInit {
names: string[];
constructor() {
= ['mango', 'pear', 'grap', 'apple'];
}
ngOnInit(): void {
}
}
Recursively traverse names array in component's template
<ul>
<li *ngFor="let name of names">Hello {{name}}</li>
</ul>
Add the component to view the browser execution results.
5. Use user-item and user-list in combination
Modify the name parameter of user-item using external input
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-user-item',
templateUrl: './',
styleUrls: ['./']
})
export class UserItemComponent implements OnInit {
@Input()
name!: string;
constructor() {
}
ngOnInit(): void {
}
}
Modify user-list template
<ul>
<app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>
Save to view browser execution.
6. Startup process analysis
ng will first look for the main entry of the program from src/
{
"outputPath": "dist/angular2-hello-world",
"index": "src/",
"main": "src/",
"polyfills": "src/",
"tsConfig": "",
"assets": [
"src/",
"src/assets"
],
"styles": [
"src/"
],
"scripts": []
}
Check the file and find that the startup Module is AppModule, located in app/
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';
import { environment } from './environments/environment';
if () {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => (err));
It can be seen that the components in this module, the dependency external modules and the AppComponents launched as top-level components are declared through the NgModule annotation;
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './';
import { AppComponent } from './';
import { HelloWorldComponent } from './hello-world/';
import { UserItemComponent } from './user-item/';
import { UserListComponent } from './user-list/';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent,
UserItemComponent,
UserListComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The above is the detailed content of Angular environment construction and simple experience. For more information about Angular environment construction, please pay attention to my other related articles!