Angular project creation

Copyright: no need to declare https://blog.csdn.net/Sun_Shydeo/article/details/90521716

1, the installation angular cli

npm install -g @angular/cli

2, check whether the configuration environment

ng -v

3, cli create a new project

ng new 项目名


ng new my-app

Tip Use Routing

Prompted to select a pre-compiled CSS styles, choose less, sass, scss, the default CSS

4, start the project

npm start


访问
http://localhost:4200/

You can modify the port number in the project /e2e/protractor.conf.js

5, create components

Into the app folder creation component, automatically a folder of the same name and file folder 4

table-list/

• table-list.component.html

• table-list.component.spct.ts

• table-list.component.ts

• table-list.component.less    或 .sass .css等

ng g component 组件名


ng g component table-list

 

6, the introduction routing module app-routing.module.ts

//app-routing.module.ts


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

Add Route

//app-routing.module.ts

import { TableListComponent } from './table-list/table-list.component';

const routes: Routes = [
  {path:"", redirectTo:'table', pathMatch:'full'}, // 首页重定向
  {path:'table',component:TableListComponent}  //path不要用分割线
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],  //添加路由监视
  exports: [RouterModule]
})

Export Route: <router-outlet> </ router-outlet> 

Route navigation: routerLink = path configuration

// app.component.html 或其他嵌套路由

<a routerLink="/table-list">table-list</a>


<router-outlet></router-outlet> 

7, the introduction of other plug-ins

angular6 using Typescrip filtered, so the need to install the corresponding description of the module type, so Typescrip grammar recognition plug to Example ~ _ ~ jQuery

npm install --save jquery

npm install @types/jquery --save

View package.json, the following tips

"@types/jquery": "^3.3.29",

"jquery": "^3.4.1",

Global introduction

//app.module.ts

import * as $ from 'jquery';