preface

After thinking about it, the concept of these things do not want to talk about, more want to talk about some practical content.

So some things have skipped over, friends please go to the official documents ha; Jump forward, write bad more than forgive.

Basic concept

The concept of everything you want can be found here.

Presents – cli start

SRC is the development directory. After production is packaged, a dist directory is generated. To get started, you see App Works from startup to browser! What files it depends on and what functions it has

  • index.html

      
<html>
<head>
  <meta charset="utf-8">
  <title>NgTestdemo</title>
  
  <! Specify the default destination for all urls to start with -->
  <base href="/"> 
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    
 <! -- Root component -->
  <app-root>Loading...</app-root>
</body>
</html>

Copy the code
  • main.ts

// Introduce production mode, control off development mode, function to come
import { enableProdMode } from '@angular/core';

// App boot module must be introduced
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


/ / root module
import { AppModule } from './app/app.module';

// Environment configuration file, can write interface path etc.. Dev, a prod
import { environment } from './environments/environment';

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

// The boot program starts
platformBrowserDynamic().bootstrapModule(AppModule);


Copy the code
  • Polyfill. Ts: To be compatible with IE10, install the corresponding polyfill, which is detailed in the documentation
  • Typings.d. ts: file for global variable declarations
  • Testconfig.*. Json: tsconfig configuration file used in different modes
  • App directory (points are very thorough, write with the general basic same)

    • App.component. CSS: root style file, SCSS is configured

    • App.com ponent. HTML: HTML

      <! Mustache includes two-way data binding -->
<h1>
  {{title}}
</h1>

Copy the code

    • App.component.spec. ts: Test cases, tedious enough, but later

    • App.components. ts: Component logic processing

        // Import decorators: Decorators can be thought of as a wrapper around some functions, making them very concise to write
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root'.// Custom elements
    templateUrl: './app.component.html'.// The HTML page associated with the component
    styleUrls: ['./app.component.css'] // The style of the component itself
  })
  
  // Export the corresponding component
  export class AppComponent {
    title = 'app works! ';  // Declare a public variable and assign a value
  }
  ` ``
Copy the code

    • App. The module. Ts: module

          // The browser's NG module
    import { BrowserModule } from '@angular/platform-browser';
    
    // This is also a decorator that defines module and component-related identifiers such as services, component elements, directives, import/export modules
    // The definition of each module must have this to work. Ng2's development pattern is like a tree, emanating from the root node
    import { NgModule } from '@angular/core';
    // Form module, for example, if you want to use some form elements or data binding within the component, otherwise you will get an error
    import { FormsModule } from '@angular/forms';
    
    // ReST-style request module
    import { HttpModule } from '@angular/http';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [ // Directives and components are placed here
        AppComponent
      ],
      imports: [ // For example, if you want to reference those modules, you need to import them
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [], / / service
      bootstrap: [AppComponent] // Start module, an app usually has only one start module!! General!!!!!
    })
    export class AppModule { }
    ` ``


Copy the code

Explanation of common template instructions

  1. {{item | SliceStr:1:2:'...' }}: can respond to the change of the corresponding item field value in the component.|Is pipe, support multiple pipes, support built-in pipes and custom pipes,:Follow is the parameter of the pipe. I will write an article on how to customize the pipe
  2. [] = "": binding component values [one-way, data flow view], directives, native HTML control properties [value, SRC,class,style], etc., double quotes support conditional expressions [not exactly equivalent to JS conditional expressions] or methods or variables,
  3. (click)="": event binding [the view triggers changes to the data source], ditto. Expressions and squares are supported.
  4. [(target)]: Bidirectional data binding, synchronization of view and data source changes, generally used for forms.

Conditional expressions that bind assignments are special:

  • Does not support:

  • Assign (=, +=, -=,…)

  • New operator

  • Use; Or the chain expression of

  • Increment or decrement operators (++ and –)

  • Does not support a computing | and &

  • Support:

  • Logical operations (| |, & &)

  • The trinary operator (true? true : false )

  • Direct assignment (item = 2);

  • Variable transmission

  • The null-protected operator (? .).

    • item? .a? .b: determines whether an item existsaThis value preventsundefinedornullLet the view render report an error

The most commonly used built-in instructions

  • Style binding (ngClass)
    • [ngClass]or[ngStyle]: An object can be passed to dynamically judge the addition of multiple styles
    • [class.a]or[style.font-size]: a single action class or an inline style
  • Data traversal (*ngFor)
  • *ngFor="let i of item; let index = index": You can use this to iterate over a list of objects,let index = indexCreate a local traversal and save the current traversal index to your custom variable index
  • Dynamic rendering (*ngIf)
  • *ngIf="item"For example, loading a view into full rendering is often used[hidden]To control the switch because*ngIfThis dynamic rendering of nodes still has a certain performance cost.

conclusion

This article doesn’t cover routing and forms; Ready to split into two articles;

  • Routing configuration and lazy loading of these,
  • Template-driven forms and reactive forms [nested form responses, etc.], enter keys trigger searches, etc.