Front-end] Angular8 Getting Started Tutorial Notes + Angular material Installation and Use

I. Introduction to Angular

Angular is a Google-developedexpand one's financial resourcesThe web front-end framework , born in 2009 , created by Misko Hevery and others , later acquired by Google . Is an excellent front-end JS framework , has been used in a variety of Google products .

According to the project count angular ( , 、、、、 , , ) is now the most used framework online.

Angular is based onTypeScriptand react,vueIt's better suited for medium to large enterprise projects than Angular.

Currently on December 25, 2019 angular latest version. According to the official introduction, Angular is updated every few months. The usage is the same for all future Angular versions, and this tutorial also applies to the
and other future releases...

在这里插入图片描述

Second, learning Angular necessary foundation

The suggested learning path for Angular is as follows:

HTML、CSS、js → → → → Angular

Supplement: If you have es6 and Typescript basis easier to understand Angular, but did not learn these two languages does not affect the learning of Angular, but to do Angular project is best to be familiar with HTML, CSS, js, over and over again to have the impression that when you start to do Angular project can be done while checking the corresponding knowledge.

Essential Foundation's Learning Fundamentals video share (take your own as needed, it explains in great detail):

1. Front-end HTML + CSS basic tutorial:
/video/av21557880?from=search&seid=1441912783416021121
2. New HTML5 + CSS3 complete set of basic tutorials complete version (beginner zero basis to start):
/video/av77217003
3.JavaScriptBasic full set of tutorials complete version (140 episodes of practical teaching, javascript from beginner to master):
/video/av21589800?p=42
4. Ultra-classic practical tutorials complete set of the full version (beginners zero-based entry):
/video/av27136694/?spm_id_from=333.788.b_636f6d6d656e74.19
Tutorial_ts introductory practical video tutorial:
/video/av38379328/?p=1
6. In-depth explanation of the ES6 series (all 18 lectures):
/video/av20327829?from=search&seid=13024896770360982203
7.W3school online reference manual (including knowledge of HTML, CSS, js, etc., can be accessed at any time):
https://

In the future, if you are interested in learning front-end partners, spare time to organize a complete version of the front-end learning video materials (reference to ShangSiGu, there are deficiencies and errors, please correct and supplement!) Need partners can view:A great collection of front-end learning routes video material.

Angular Learning Notes

References:

Angular8 Video Tutorials - IT Camp
Angular Official Learning Documentation
Angular official learning document (Chinese version)
Link:IT Camp Angular8 Getting Started Hands-on Video Tutorial (18 lectures all) Extract code: 4oec

Since I am going through theAngular8 Video Tutorials - IT CampLearning Angular, so this study notes mainly for this video tutorial organized by (reference from the earth from the teacher's video notes), I hope to just begin Angular partners have to help! (Click the title below to view)

1. Angular environment setup, create Angular project, run Angular project
2. Angular directory structure analysis and creation of components in Angular
3. angular components and templates inside components
*:: 4. Angular forms (illustrated by an example)
*Implement a toDoList similar to the Jingdong App search cache data function [front knowledge comprehensive exercise] Angular in the service and the implementation of the toDoList data persistence
6. Dom operations and @ViewChild in Angular and Angular performs css3 animations.
7. Parent-child components and inter-component communication in Angular
8. Lifecycle functions in Angular
*Rxjs Asynchronous Data Streaming Programming - Rxjs Quickstart Tutorials
*:: 10. Data interaction in Angular (get jsonp post)
* :: Routing in
*:: 12. Customized modules in Angular
* custom modules and configure routing to achieve lazy loading of modules (lazy loading error Error find module ... and the solution)

Angular material installation and use

material official documentation:
material official documentation (Chinese version):/components/categories

(i) Angular material installation

1. First create a new project

2. In the created project, enter the following three sentences to complete the installation of material (material belongs to which project to use in which project to install)

  (1)npm install --save @angular/[email protected] @angular/[email protected] @angular/[email protected] hammerjs
  (2)npm install --save @angular/[email protected]
  (3)ng add @angular/material

(ii) Angular material use

1. Introduce the corresponding material module in the
2. New creationsubassembliesJust use material
Here you can refer to the examples in the official documentation (just look it up and use it, there are plenty of examples)
在这里插入图片描述

3. I did this by creating a material custom module, storing the introduced material module in it, and then adding theimport{MaterialModule}from'./material/material/';Then create a new component and copy the code from the official documentation to run it.

Sharing myfor reference (the material module introduced here is incomplete and needs to be added according to the actual situation)

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common'; 
 import { 
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatSliderModule,
    MatOptionModule,
    MatAutocompleteModule,
    MatSlideToggleModule,
    MatCheckboxModule,
    MatSelectModule,
    MatRadioModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatDialogModule,

} from '@angular/material';
 import { ReactiveFormsModule,FormsModule } from '@angular/forms';

 const Material = [
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatSliderModule,
    MatOptionModule,
    MatAutocompleteModule,
    MatSlideToggleModule,
    MatCheckboxModule,
    FormsModule,
    MatSelectModule,
    MatRadioModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatDialogModule,
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    Material
  ],
  exports: [Material]
})
export class MaterialModule { }

(of a computer) run

V. The rest of the references for the Angular writing project

1. Angular's layout (responsive layout) needs information:
/weixin_43938259/article/details/105265708
2. Angular8 development projects need to configure things
/weixin_43938259/article/details/105193415
3. Icons to be used in the layout process:
/icons
Issues that arise during development can be queried:
/questions/56704164/angular-viewchild-error-expected-2-arguments-but-got-1