Angular项目创建

最新推荐文章于 2025-01-10 21:08:50 发布

CodeLines3

最新推荐文章于 2025-01-10 21:08:50 发布

阅读量930

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/Sun_Shydeo/article/details/90521716

angular 专栏收录该内容

5 篇文章

订阅专栏

本文档详细介绍了如何创建一个Angular项目，从安装CLI到配置环境，再到创建组件和引入路由模块。步骤包括：安装CLI，创建项目并选择路由及CSS预编译样式，启动项目并修改端口号，创建组件，添加路由，以及全局引入其他插件如jQuery，并处理TypeScript的类型描述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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';