Angular项目创建

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/90521716

1、安装 angular cli

npm install -g @angular/cli

2、检查环境是否配置

ng -v

3、cli 创建新项目

ng new 项目名


ng new my-app

提示选择使用路由

提示选择CSS预编译styles，选择less、sass、scss，默认CSS

4、启动项目

npm start


访问
http://localhost:4200/

可在 项目/e2e/protractor.conf.js 中修改端口号

5、创建组件

进入到app文件夹创建组件，自动一个同名文件夹以及文件夹下 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、引入路由模块     app-routing.module.ts

//app-routing.module.ts


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

添加路由

//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]
})

路由出口：<router-outlet></router-outlet> 

路由导航：routerLink=配置的path

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

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


<router-outlet></router-outlet> 

7、引入其他插件

angular6是使用Typescrip过滤，所以还需安装对应的类型描述模块，让Typescrip识别插件语法，以 jQuery为例 ~_~

npm install --save jquery

npm install @types/jquery --save

查看package.json，有如下提示

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

"jquery": "^3.4.1",

全局引入

//app.module.ts

import * as $ from 'jquery';