• Build the environment to create the project

    • Install node. js to test whether the installation is successful: Node -v(view nodejs version) (official website)[nodejs.org/zh-cn/]

    • Open a terminal/console window and install the Angular CLI globally

      NPM install -g @angular/cli NPM config set registry registry.npm.taobao.org, and then install CNPM instead of NPM: NPM install -g CNPM install -g @angular/cli

    • Open a terminal/console window to create a workspace and initial application

      Enter E disk E:

      Initial application project ng new my-Angular

    • After initialization, run the project

      ng serve --open

  • This section describes common angular-CLI commands

    • Ng help (for command information)

    • Ng new (Create a new Angular project)

    • Ng serve (run)

    • Ng init (initializes a new Angular project)

    • Ng generate (Build new code)

      • Ng g c XX (New component)
      • Ng g d XX (new instruction)
      • Ng g p XX (New pipe)
      • Ng g s XX (New service)
      • Ng g m XX (Creating a template)
      • Ng g r XX (Adding a route)

  • The life cycle

The authorities have detailed. Go

  • Common grammar

    • NgModules grammar

      • platformBrowserDynamic().bootstrapModule(AppModule); (Start with the root component specified in the NgModule.)

      • @NgModule (Defines a module that can contain components, directives, pipes, and service providers.)

      • Declarations (list of components, directives, and pipes that belong to the current module.)

      • Imports: [BrowserModule, SomeOtherModule] (List of modules imported by this module.)

      • Exports: [MyRedComponent, MyDatePipe] (List of components, directives and pipes that are visible to modules that import this module.)

      • Providers: [MyService, {provide:…}] list of dependency injection providers, available in this module and in all modules imported by this module.

      • Bootstrap: [MyAppComponent] (list of components that start when this module starts.)

    • Template syntax

      • <input [value]="firstName">– Bind the value property to the expression firstName.
      • <div [attr.role]="myAriaRole">– Binds the Attribute role to the result of the expression myAriaRole.
      • <div [class.extra-sparkle]="isDelightful">– Determines whether the CSS class extra-sparkle appears on the current element based on whether the result of expression isDelightful is true.
      • <div [style.width.px]="mySize">– Bind the CSS style property width’s px (pixel) value to the result of the expression mySize. Units are optional.
      • <button (click)="readRainbow($event)">– When the click event on the button element (and its children) fires, call the method readRainbow and pass in the event object as a parameter.
      • <div title="Hello {{ponyName}}">– Binds a property to an interpolation string (such as “Hello Seabiscuit”).
      • <my-cmp [(title)]="name">– Set bidirectional binding.
      • <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>– Converts the current value of the expression cardNumber using a pipe named myCardNumberFormatter.
      • <p>Employer: {{employer? .companyName}}</p>– Safe navigation operator (?) Indicates that the Employer field is optional, and if undefined, the rest of the expression is ignored and undefined is returned.

    • Built-in commands

      • <section *ngIf="showSection">– Removes or recreates part of the DOM tree based on the result of the showSection expression.
      • <li *ngFor="let item of list">– Turn the Li element and its contents into a template and use this template to instantiate a view for each entry in the list.
      • <div [ngSwitch]="conditionExpression"> <ng-template [ngSwitchCase]="case1Exp">... </ng-template><ng-template ngSwitchDefault>... </ng-template></div>– Select an embedded template based on the current value of conditionExpression and decide whether to replace the contents of the div accordingly.
      • <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">– Determines whether a CSS class corresponding to name appears on the element based on whether the value in the map is true. The expression on the right should return a map of the form {class-name: true/false}.
      • <div [ngStyle]="{'property': 'value'}">– Allows you to style HTML elements using CSS. You can use CSS directly as in the first example, or you can call methods in the component.

    • The form

      • <input [(ngModel)]="userName">– Provides bidirectional data binding, parsing, and validation for form controls.

To summarize some of the ways the project used the Router:

  • Import the Router from the routing library

    • import { RouterModule, Routes } from '@angular/router';

  • Common configuration

    • Each Route maps the path of a URL to a component. Note that path cannot begin with a slash (/). The router parses and builds the final URL for you so that you can use both relative and absolute paths when navigating between multiple views of your application.
    • The: ID in the second route is the Token for a route parameter.
    • The data attribute in the third route is used to store arbitrary information about each specific route.
    • The empty path (“) in the fourth route represents the default path for the application, which is accessed when the URL is empty, so it is usually used as a starting point.
    • In the last route**Path is a wildcard character. When the requested URL does not match any of the paths in the routing table defined earlier, the router selects this route. This feature can be used to display a “404-Not Found” page or to automatically redirect to another route.
    • Routing exit:<router-outlet></router-outlet>

  • Active status of the route link

    At the successful completion of each navigational life cycle, the router builds a tree of ActivatedRoute that represents the current state of the router.
    Each ActivatedRoute in the RouterState provides a way to traverse the routing tree from any active route up or down to get information about parent, child, and sibling routes.

  • Obtaining Route Parameters

    • paramMap

  • Snapshot

    let id = this.route.snapshot.paramMap.get('id'); //route.snapshot provides initial values for route parameters.

  • Add the routing

    • *. HTML:<a routerLink="/me/123456">
    • *.component.ts: this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);