1. ng new project-name --style=scss --routingAfter initializing the project file, if runng serve -oThe following error occurs:
ERROR in./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js! ./node_modules/postcss-loader/src?? embedded! ./node_modules/sass-loader/lib/loader.js?? ref--14-3! ./src/styles.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module'node-sass'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.sassLoader (/home/local/ BROCELIA zhli/WebstormProjects/ng6 - project/node_modules/sass - loader/lib/loader. The js: hand 2) ℹ "WDM" : Failed to compile.Copy the code

Sudo NPM install node-sass because of the lack of dependencies: node-sass, sudo NPM install node-sass Sudo NPM install –save-dev –unsafe-perm node-sass

  1. If you are usingsudoAfter initializing the project file, the folder will be locked, causingwebstormUnable to obtain permission to edit text, so used in Terminalsudo chmod 777 ng6-projectTo grant all permissions to the folder, then usesudo chown -R zhli /home/local/BROCELIA/zhli/WebstormProjectsTo grant permissions to the parent folder, then you can edit the file normally.
  2. inAngularEngineering useMaterial iconsWhen, first insrc/index.htmlthe<head>Add a dependency to:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="700 https://fonts.googleapis.com/css?family=Montserrat:300," rel="stylesheet">
Copy the code

Then use the reference template: < I class=”material- ICONS “>account_circle
if the image is not refreshed, try sudo NPM install material-design-icons and ng-serve-o restart the server.

  1. Set of dependent installation instructions:
// Animation dependency
sudo npm install @angular/animations@latest --save
// Material icons
sudo npm install material-design-icons
Copy the code
  1. Create a collection of component directives:
// Create a new component
ng generate component details
// Request API service
ng generate service data
Copy the code
  1. Presents the animation:

Import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’ in app.module,ts; Add BrowserAnimationsModule to import. Add dependencies import {trigger, style, transition, animate, keyframes, query, stagger} from ‘@angular/animations’ to the component; And define the animation in the @ Component identifier.

animations: [
    trigger('listStagger', [
      transition(< = > '* *', [
        query(
          ':enter',
          [
            style({ opacity: 0, transform: 'translateY(-15px)' }),
            stagger(
              '50ms',
              animate(
                '550ms ease-out'.// animate ('duration delay easing')
                style({ opacity: 1, transform: 'translateY(0px)' })
              )
            )
          ],
          { optional: true }
        ),
        query(':leave', animate('50ms', style({ opacity: 0 })), {
          optional: true})]])Copy the code

Among them:

  • Trigger is used to Trigger an animation
  • Transition defines a transition from state to state:open => close.close => open.* => open.* => close.close => *.open => *.void => *.':enter'.':leave'
  • Style is used to define styles, which correspond to different states and are defined in different states. Style names should be humped:camelCase
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),
Copy the code
  • Animate is the definition of animation
transition('open => closed', [
    animate('1s')),Copy the code
  • Query () is used to define additional animations within the element where the animation has already been defined,This function targets specific HTML elements within a parent component and applies animations to each element individually
  • Tagger () is used to define timing gap between different animations and add animation delay between different animations
  • When referencing, use @ to refer to the name of the animation Trigger:<div [@triggerName]="expression">... </div>;
  1. Routing: Detailed tutorial of Routing
  2. To add HttpClientModule and DataService dependencies to app.module.ts, add HttpClientModule to import and DataService to providers:
import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    / * *... * * /
    HttpClientModule,
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
Copy the code

  1. Angular supports bidirectional data binding:

    In bidirectional binding, data property values are streamed from the component to the input box via property binding ([hero]="selectedHero"). The user’s changes flow back to the component through the event binding, setting the property value to the latest value ((click)="selectHero(hero)").

  2. Template inline template writing: A multi-line string wrapped in ECMAScript 2015 backquotes (‘). Backquotes (‘) – note, not single quotes (‘) – allow a string to be written on multiple lines, making the HTML template easier to read.

template: ` 
{{title}}
 
My favorite hero is: {{myHero}}
 `
Copy the code

Using templates eliminates the need to write template files (as required) :

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: ` 
{{title}}
 
My favorite hero is: {{myHero}}
 `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}
Copy the code
  1. Data class creation:
  • Create data class:ng generate class data
  • Construct attribute: 
    export class Data {
  constructor(
    public id: number.public name: string) {}}Copy the code
  • The data data class can be returned in properties after being imported in app.component.tsThe typedArray of objects: 
        dataa = [
      new Data(1.'Windstorm'),
      new Data(13.'Bombasto'),
      new Data(15.'Magneta'),
      new Data(20.'Tornado')]; myData =this.dataa[0];
Copy the code
  1. Cross-references to statement contexts:
<button (click) ="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click) ="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit) ="onSubmit(heroForm)">.</form>
Copy the code

The variable name in the template context takes precedence over the variable name in the component context, that is, in deleteHero(hero) above, hero is a template input variable, not the hero property in the component