New project

ng new project-one
Copy the code

Because the network environment is unstable, the creation process may be blocked. You can go to the project directory and run the CNPM install command

Start the project

Ng serve --open --port 4201 Start the project and specify a port number, and open a browserCopy the code

Use SCSS instead of CSS

Change styles. CSS in the project to styles. SCSS and change the "styles. CSS "for.angular-cli.json to "styles. SCSS" so you can use SCSS laterCopy the code

The directory structure

The following directories are app subdirectories/API to encapsulate requests, request interception, response interception, interface address/Compontent custom common group/Guard route interception/Models Data model definitions, such as Interface Class, are intended to standardize data structures and types. /page stores pages /service stores services (excluding requests) /util stores common custom methods used for communication between pages or componentsCopy the code

The routing configuration

Ng g module app-routing --flat --module=app 2. Create a new user directory under the page directory. Then create a new list.html list.ts list.scss 3 under the user directory. App-routing.module. ts import {NgModule} from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { UserList } from './page/user/list'; const routes: Routes = [ { path: '', redirectTo: '/', pathMatch: 'full' }, { path: 'userlist', component: UserList }, ]; @NgModule({ imports: [ CommonModule, RouterModule.forRoot(routes), ], declarations: [], exports: [RouterModule] }) export class AppRoutingModule { } 4. Import new page to app.module.ts import {UserList} from './page/user/list'; declarations: [ AppComponent, UserList ], 5. App.com pontent. HTML add < the router - outlet > < / router - outlet > 6. Visit http://localhost:4200/userlist pagesCopy the code

Third party plug-in, component introduction

Example 1: dayjs https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md 1.1 installation dayjs NPM install dayjs - save 1.2 -list.ts import * as dayjs from 'dayjs'; export class UserList { dayjs = dayjs; } -- the plugin {{dayjs('2018-08-08')}} used in list.html does not write a type definition package specifically for Angular, so it introduces example 2: Lodash Lodash CNPM install lodash --save CNPM install @types/lodash --save-dev 1.2 Tsconfig. json added "types" : ["lodash"], 1.3 list.ts uses import * as _ from 'lodash'; console.log(_.partition([1, 2, 3, 4], n => n % 2));Copy the code