preface

Because of my work, I’m currently developing projects using Angular6+ and Angular’S UI framework, so I know a lot about Angular. It would be nice if this series of articles, and hopefully this series of articles, could help developers who might be using Angular get started.

About the presents

  1. AngularJs ! == Angular 2+
  2. Angular 2+ is well documented in Chinese at www.angular.cn/
  3. Angular allows us to build applications for all platforms. For example: Web applications, mobile Web applications, mobile applications and desktop applications

Why Angular

  1. The idea of Angular, combined with Typescript, allows backend programmers to quickly get up and running and build front-end pages.
  2. Angular is a framework in the true sense that all solutions are in Angular, such as HTTP requests, forms systems, routing, dynamic HTML, and so on.
  3. Angular has its own development rhythm and project structure that makes it structurally sound and maintainable in large projects with many people developing them.

Why Angular

  1. The company in
  2. Angular knows many problems ahead of time when it works with Typescript static checking. JS can’t do this, and Typescript and Angular are already deeply intertwined
  3. Don’t bother with NPM too much other stuff like the common Axios
  4. The cost of learning was not high for me, and completing the development level was actually easy to start with
  5. Google is certainly a big reason
  6. Definitely play with all three frames (hahahahahahaha)

The installation presents

www.angular.cn/cli please follow the documentation to install, can be said to be a very fool.

Part of the Angular project structure (SRC is already written, but can be viewed as a project in development)

Introduce the necessary knowledge before the project

  1. The Module Module

    There are official references to this, and many people’s blogs mention ngModules

    Here I would like to explain my understanding of the concept of Module:

    Example: A COMPUTER = monitor + host + keyboard & mouse

    Presents perspectives:

    A computer = monitor module + host module + keyboard and mouse module

    Display module = Base component (Component) + Display screen component (Component) + wire component (Component)

    Host module = Graphics card component + Operating system Service + Chassis component + CPU component +…

    Keyboard Module = Keyboard Module + Mouse Module

    Keyboard module = Keyboard component (Component) + Cable (Component)

    Mouse module = Mouse component (Component) + Cable (Component)

    .

    In my opinion, a module is a combination of components, services, and others (such as directives, pipes) into a functional block. After I introduce this module, I can use the functionality of this feature block.

src

That’s where our page is, of course.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { RefreshComponent } from './refresh/refresh.component';
import { AlertComponent } from './alert/alert.component';

const routes: Routes = [
{ path: ' '.component: WelcomeComponent },
{ path: 'layout'.loadChildren: './layout/layout.module#LayoutModule' },
{ path: 'refresh'.component: RefreshComponent },
{ path: 'alert'.component: AlertComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}Copy the code

I’m looking at this file for the first time

  1. Vue is an array of routes. Each object has a path. Component is the loaded component
  2. : Routes Type declarations that are covered in every Typescript tutorial.
  3. LoadChildren translates to “loading sons,” which, by inference, is something that loads subsets. (Yes, it’s lazy to load a submodule.)
  4. @ngModule ({}) can’t read it, but imports exports can. (The @NgModule is actually a decorator. See the Typescript Decorator for details to see how it works.)
  5. exports class ….. Export the routing module

I look at the file now

  1. Definition of the root route. Lazy loading or not setting
  2. The @NgModule decorator adds imported and exported metadata to the current AppRoutingModule.
  3. The route object of the RouterModule attribute is Routes
  4. Export RouterModule for other modules to use

app.component.ts

I’m looking at this file for the first time

  1. @component () doesn’t know much, but selector templateUrl,styleUrls do. (@Component is also a decorator, adding the above three attributes to AppComponent)
  2. Title = ‘condee-uI-ng’ corresponds to the component data. Vue data, React state

I look at the file now

The 1.@Component decorator adds three metadata to the AppComponent that tells Angular where to get the main building blocks it needs to create and display the component and its view. The AppComponent is exported. 2. AppComponent can write its own static properties.

.

(To be continued)