angular基础脚手架搭建
Angular 文档简介
当前文档基于有一定MVVM理解和认知的同学，需要快速上手angular框架而编写的个人学习文档，这份 Angular 文档会帮助你学习和使用 Angular 框架与开发平台，从你的第一个应用开始，一直到优化复杂的企业级单页面应用。
一、安装Angular相关开发环境
[图片上传失败...(image-41814a-1686550070247)]
- 全局安装脚手架工具：安装命令（只需要安装一次）
npm install -g @angular/cli
或者
cnpm install -g @angular/cli --推荐使用速度较快
- 检测是否按照成功
[图片上传失败...(image-e4ec6c-1686550070246)]
二、通过Angular脚手架创建一个新的项目
-
打开自己要创建的文件夹，shift+右键打开命令行窗口
-
ng new MyNgProject(项目名称)
[图片上传失败...(image-3187ed-1686550070246)]
注意：如果是针对个别的项目，可以新建一个文件夹然后npm install @angular/cli@**
- 点击ng serve，脚手架启动成功
[图片上传失败...(image-f4046f-1686550070246)]
[图片上传失败...(image-6d74e6-1686550070246)]
三、目录讲解
说明 ```javascript |-- 文件名 // 说明 |-- 首层目录 |-- e2e // 自动化集成测试目录 |-- node_modules // npm/cnpm第三方依赖包存放目录 |-- src // 应用源代码目录 |-- .editorconfig // 不同编译器统一代码风格 |-- .gitignore // git中的忽略文件列表 |-- angular.json // Angular的配置文件 |-- browserslist // 配置浏览器兼容性的文件 |-- karma.conf.js // 自动化测试框架Karma的配置文件 |-- package-lock.json // 依赖包版本锁定文件 |-- package.json // 标准的npm工具的配置文件 |-- README.md // 项目说明的MakeDown文件 |-- tsconfig.app.json // app项目的TypeScript的配置文件 |-- tsconfig.json // 整个工作区的TypeScript配置文件 |-- tsconfig.spec.json // 用于测试的TypeScript配置文件 |-- tslint.json // TypeScript的代码静态扫描配置
|-- src目录 |-- app // 工程源码目录 |-- assets // 资源目录 |-- environments // 环境配置目录 |-- favicon.ico // header里的icon |-- index.html // 单页应用的宿主HTML |-- main.ts // 入口ts文件 |-- polyfills.ts // 不同浏览器兼容脚本加载 |-- karma.conf.js // 自动化测试框架Karma的配置文件 |-- style.css // 整个项目的全局css |-- test.ts // 测试入口
|-- app目录 |-- app-routing.module.ts // app路由 |-- app.component.css // app的css |-- app.component.html // app的html |-- app.component.spec.ts // app的测试 |-- app.component.ts // app的组件 |-- app.module.ts // app的模块 |-- environments目录 |-- environments.prod.ts // 生产环境 |-- environments.ts // 开发环境 ```
具体内容
.editorconfig
[图片上传失败...(image-9490d-1686550070246)]
angular.json **** javascript |-- angular.json // Angular的配置文件 |--首层目录 // 说明 |--"$schema": "" // 架构关键字:指出如何形式描述XML文档的元素 |--"version": 1, // 版本 |--"newProjectRoot": "projects", // 新项目路径：多项目开发 |--"projects": {} |--"defaultProject": "scrollable-tab" // 默认项目 |--"projects": {} |--"scrollable-tab":{} // 项目scrollable-tab |--"projectType": "application", |--"schematics": {}, |--"root": "", |--"sourceRoot": "src", // 项目根路径 |--"prefix": "app", // 安装应用的指定目录 |--"architect": {} // 架构目录 |--"build": {} // 搭建命令文件目录 |--"serve": {} // 服务命令文件目录 |--"extract-i18n": {} // 语言翻译目录 |--"test": {} // 测试目录 |--"lint": {} // 代码规范目录 |--"e2e": {} // 测试目录 |--"builder": "@angular-devkit/build-angular:" // AG开发搭建路径 |--"options": {} // 相关可选文件目录 |--"configurations": {} // 配置文件目录
browserslist **** JavaScript // 只支持市场占有率＞0.5%的浏览器 > 0.5% last 2 versions Firefox ESR not dead // 不支持IE 9-11 not IE 9-11 # For IE 9-11 support, remove 'not'. ### package-lock.json&package.json **** JavaScript |-- package-lock.json // 依赖包版本锁定文件 |--"name": "scrollable-tab", // 包的名称 //包锁:必须与package.json内容匹配 |--"version": "0.0.0", // 包的版本 //包锁:必须与package.json内容匹配 |--"lockfileVersion": 1, // 整数版本，1从此文档的版本号开始，在生成此版本时使用其语义package-lock.json |--"requires": true, // 是否必需 |--"dependencies"{} // 包的依赖目录 |-- package.json // 依赖包版本文件 |--"name": "scrollable-tab", // 包的名称 //包锁:必须与package.json内容匹配 |--"version": "0.0.0", // 包的版本 //包锁:必须与package.json内容匹配 |--"scripts": {}, // 运行脚本命令目录 |--"ng": "ng", // 全局命令 |--"start": "ng serve", // 开发环境项目启动命令 |--"start.prod": "ng serve --aot", // 生产环境项目启动命令 |--"build": "ng build", // 项目打包命令 |--"test": "ng test", // 项目测试命令 |--"lint": "ng lint", // 项目静态编译检测语法命令 |--"e2e": "ng e2e", // 测试命令语句 |--"ivy": "ivy-ngcc" // 兼容性编译器命令语句 |--"private": true, // 是否必需 |--"dependencies"{} // 生产环境下包的依赖目录 8//大版本.0//小版本.0//补丁版本 |--"@angular/animations": "~8.0.0", // ~:锁定大版本与小版本，补丁版本可变动 |--"tslib": "^1.9.0", // ^:锁定大版本，小版本与补丁版本可变动 |--"protractor": "5.4.0", // :严格锁定在该版本，全部版本都不可变动 |--"devDependencies"{} // 开发环境下包的依赖目录
app-routing.module.ts // app路由 **** TypeScript // 变量导入路径 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; // 声明路由 const routes: Routes = [{ // 默认路由路径 path : '', // 默认路由组件 component : HomeComponent }]; // @angular/cli 打包的最小单位 /** * @angular/cli 会检查所有 @NgModule 和路由配置，如果你配置了异步模块，cli 会自动把模块切分成独立的 chunk（块） * 其它框架基本上都需要你自己去配置 webpack，自己定义切分 chunck 的规则而Angular 里面，打包和切分的动作是 @angular/cli 自动处理的，不需要你干预 * @NgModule 元数据类型图表 * */ @NgModule({ // 导入模块 imports: [RouterModule.forRoot(routes)], // 导出模块 exports: [RouterModule] }) // 导出控制器 export class AppRoutingModule { } |--@NgModule元数据说明 |--declarations: [] // 属于该模块的可声明对象（组件、指令和管道）的列表 |--providers: [] // 依赖注入提供商的列表 |--imports: [] // 被导入的模块列表 |--exports: [] // 可导出的模块的可声明对象（组件、指令、管道类）列表 |--bootstrap: [AppComponent] // 自动启动的组件列表,应用根组件才有 |--entryComponents: [] // 可动态加载进视图的组件列表
[图片上传失败...(image-731c27-1686550070245)]
四、路由与导航
一）．路由的创建
创建路由有三个基本的构建块。
首先检查把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。
[图片上传失败...(image-b92f7f-1686550070245)]
1. 把 RouterModule 和 Routes 导入到你的路由模块中。如果你有使用anglular cli，那么cli会自动执行这一步CLI ，还为你的路由设置了 Routes 数组，并为 @NgModule() 配置了 imports 和 exports 数组。
[图片上传失败...(image-398d2a-1686550070245)]
2.在 Routes 数组中定义你的路由。这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。
[图片上传失败...(image-5d0b7-1686550070245)]
3.把这些路由添加到你的应用中。和vue一样，也有routerLink
[图片上传失败...(image-3f1fd-1686550070245)]
二）．路由的跳转方式和传参
[图片上传失败...(image-8b0f25-1686550070245)]
- 通过点击事件传参
定义点击事件：
<button nz-button nzType="primary" (click)="linkTo(item.id)">点击事件编辑</button>
方法实现：
linkTo(uuid: string): void {
this.router.navigate(['/menu_list/detailes'], {
queryParams:{ id: uuid },
});
}
注意：前提要引入Router
import{ Router} from '@angular/router';
constructor(
public router: Router
) { }
- 通过a标题跳转
(1) 定义a标签点击事件即可
<a [routerLink]="['/menu_list/detailes']" [queryParams]="{id:item.id}">
a标签编辑
</a>
- 获取传入的参数
import{ ActivatedRoute, Params} from '@angular/router';
constructor(
public router: ActivatedRoute,
) {}
ngOnInit(): void {
this.router.queryParams.forEach((params: Params) => {
if (params.id) {
console.log(params.id); // =1
}
});
}
五、组件的创建与使用
- 组件的创建
你在哪个.module下使用当前组件，就在哪个文件夹下右键打开命令行，然后执行，他会自动创建，文件名称规范：xxx.component.ts
ng generate component xxx
Ex：ng generate component test
通过快速创建你会得到以下内容
[图片上传失败...(image-4cd785-1686550070244)]
- 组件说明
这个文件就是负责写css样式的
test.component.css
这个文件就是写html的
est.component.html
这个文件就是写js的
test.component.ts
可以参考微信小程序编辑生成的文件格式，一个意思
这里详细说下ts文件
import{ Component, OnInit} from '@angular/core';
@Component({
//组件的唯一标识，使用也是这个格式，app-xxxx格式
selector: 'app-test',
//这就是html，跟html文件名一样
templateUrl: './test.component.html',
//这里是个数组，意思就是可以引入多个css，注意，后一个会将前一个样式覆盖
【1.css，2.css】===2的样式如果跟1的名字一样，就会覆盖
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
- 使用，只要注册在了module里，所在module里的任何组件都可以调用
[图片上传失败...(image-7bdef2-1686550070244)]
六、组件直接传参（父传子，子传父）
其实原理有点像vue的event up， props down，只是语法不一样而已
- 父传子
父组件：先将子组件引入，app-child-new即是子组件在selector里声明的，唯一标示id
[图片上传失败...(image-96912f-1686550070244)]
通过父组件点击事件，讲parentNum++，传入到子组件中，如上，需要用[]包裹变量，当前包裹的名称即为子组件接受的名称，这里我写的是一样的，可以不一样
[图片上传失败...(image-ea3182-1686550070244)]
子组件中：@Input（）即为子组件接受父组件传入的变量值，接收即可
[图片上传失败...(image-8d4f1a-1686550070244)]
当前parentNum即为父传入的数据
[图片上传失败...(image-6c7188-1686550070244)]
点击父按钮，调用方法后，传入的值就会发生变化
[图片上传失败...(image-b51624-1686550070244)]
- 子传父
子组件中：先在子组件声明一个点击事件
[图片上传失败...(image-88a846-1686550070244)]
然后childNumChange就是父组件传入的方法，在点击子组件toggle方法时，调用childNumChange.emit方法，将num传入到父组件中。
[图片上传失败...(image-34a25-1686550070244)]
父组件中：childNumChange即为传入子组件的方法名称，而childCallBack即为在父组件来接收子组件传入的方法，$event即为传入的值，语法就是这样写
[图片上传失败...(image-f56d36-1686550070244)]
在父组件接收传入的值后，可进行后续其他操作，比如点击了子组件某个方法后，父组件某些值也要改变，逻辑就是在返回的callback方法中执行即可
[图片上传失败...(image-36bbd-1686550070244)]
- 父组件调用子组件方法
有时候我们需要在父组件里，调用到子组件里面相关方法，比如当我们点击保存的时候，保存按钮在父组件，但是校验的方法在子组件，于是我们需要在点击保存的时候，调用到子组件校验方法
父组件中：给组件添加唯一标识，语法#xxx
[图片上传失败...(image-d637b0-1686550070244)]
然后在父组件ts中，首先导入子组件，然后，引入anglular的Api（ViewChild），固定语法@ViewChild（‘xxxx’）,这里的xxx就是上面在组件上标识的唯一标识childNew，然后声明一个变量叫childNew（此名称自定义命名），将组件NewChildCoponent组件指向到当前变量childNew，即下面框框内容。这样就相当于是把子组件引入到了父组件中，当前访问this.childNew，即可访问到子组件相关方法。
[图片上传失败...(image-19dbb1-1686550070244)]
