angular入门

佛的眼泪 發表於 2023-6-28 18:49:00

程序设计原则：
1、YAGNI：You Are't Gonna Need It（不写不需要的代码）
2、DRY：Don't Repeat Yourself（不要cv自己的代码）
3、OCP：Open Close Principle（开闭原则：对扩展开放、对修改封闭）
4、Low Coupling, High Cohesion（高内聚低耦合）
5、Dimeter Law（迪米特法则，也称为"最少知识法则"）一个对象/组件只负责必须的少量功能
<h3>angular框架</h3>
MVVM框架的组成：数据绑定、指令系统、组件式编程、路由和导航、状态保持、第三方组件库。
angular是由Google开发的2009年开发的MVVM框架，可用于开发web、移动、桌面应用的中大型框架。
速度与功能：Canvas 、 svg 、视频播放、 Web Worker 、WebSocket、服务端渲染。
Angular开发方式：脚手架的方式，不能使用script的引入方式。
<h4>1、项目启动过程分析</h4>
1）、angular.json:NG项目的配置：
　　index:'src/index.html'  --> 渲染dom树的入口  <app-root />
　　main:'src/main.ts'  --> 编译打包的入口文件
2）、main.js --> bootstrapModule(AppModule)引导启动一个模块，ng中一个模块就是一个容器 　　model：模型，即数据，MVVM中的第一个M 　　module：模块，主要出现在 node.js、ES6和angular中
　　modal：弹框（模态对话框）
3）、app.module.ts --> bootatrap:
4）、app.component --> selector:'app-root'   templateUrl::'app.component.html'
5）、app.component.html --> HTML片段
<h4>2、angular核心概念之1：模块</h4>
　　Module：不同于node.js或ES6中的模块，NG中的模块就是一个抽象的容器，用于对组件进行分组。
　　整个应用初始时有且只有一个主组件：AppModule
<h4>3、angular核心概念之2：组件</h4>
　　组件：是一段可以反复使用的页面片段，如页头。。。
　　组件 = 模板template + 脚本script + 样式style。
　　NG中任何一个组件都必须声明在具体的模块中。
　　创建组件流程：
　　1）、创建组件class
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core';
// 装饰器 Decorator,用于指定class的用途
@Component({
selector: 'myc01',
template: '<h2>我的组件c02</h2><hr>',
styleUrls: [],
})
export class MyC01Component {}</pre>
</div>
　　2）、在某一个模块中注册组件class
　　3）、使用已经注册过的组件
Angular提供的创建组件化的简化工具：
ng generate component 组件名  or  npx ng generate(g) component 组件名
上述可简化为  ng g c 组件名
扩展：Nodejs官方安装的工具：
　　npm：第三方模块的维护工具
　　npx：第三方可执行文件的执行工具，Node Package Executor，npx可用于执行当前项目中node_modules/.bin目录下的可执行文件。
<h4>4、angular核心概念3：数据绑定</h4>
一、数据绑定
1)、HTML绑定  {{ NG表达式 }}
　　NG表达式中可以执行的代码：算数运算，比较运算，逻辑运算，三目运算，调用函数。
　　创建对象和JSON序列化不可以在NG表达式中使用。
2）、属性绑定
        形式1、直接在属性上用 {{ }}    
　　形式2、使用 [ ] 做属性绑定    
3）、指令绑定
①、循环绑定: *ngFor
<div class="cnblogs_code">
<pre><ul>
<li *ngFor="let item of empList; index as i">{{i+1}}-{{item}}</li>
</ul></pre>
</div>
②、选择绑定: *ngIf
<div class="cnblogs_code">
<pre><div *ngIf="isPaidUser; else elseBlock" class="vip">会员专享</div>
<ng-template #elseBlock>非会员</ng-template></pre>
</div>
③、样式绑定    和   
<div class="cnblogs_code">
<pre><div ="myStyleObj">样式绑定</div></pre>
</div>
<div class="cnblogs_code">
<pre><button ="myClassObj" (click)="loadMore()">加载更多</button>
// ts
myClassObj = {
btn: true,
'btn-success': true,
};</pre>
</div>
④、特殊的选择绑定 
<div class="cnblogs_code">
<pre><div ="userLevel">
欢迎您，普通客户
<div *ngSwitchCase="'vip'">欢迎贵宾归来</div>
<h3 *ngSwitchCase="'blackgold'">黑金您好，可以为您服务吗?</h3>
您尚未登录
</div></pre>
</div>
⑤、自定义指令：
创建指令的命令：ng g directive 指令名
自定义指令都是作为元素属性来使用的，selector应该是：[指令名]
Angular中的指令分为3类：
　　1）、组件指令：NG中Component继承自Directive。
　　2）、结构型指令：会影响DOM树的结构，必须以 * 开头。
　　3）、属性型指令：不会影响DOM树的结构，只会影响元素的外观或行为，必须以 [ ] 括起来。
④、事件绑定
<div class="cnblogs_code">
<pre><button (click)="printUname()">输出用户名</button></pre>
</div>
⑤、双向数据绑定    [(ngModel)]
 　　方向1、Model => View：模型变则视图变，用 [ ] 表示
　　方向2、View => Model：视图（表单元素）变则模型变，用 ( ) 绑定
<div class="cnblogs_code">
<pre>// 首先在app.module.ts中引入模块
import { FormsModule } from '@angular/forms';
// BrowserModule:浏览器模块，其中导出了CommonModule模块，所以 ngIf 等可以直接使用，不包含ngModel。FormsModule包含了ngModel
imports: ,</pre>
</div>
<div>
<div class="cnblogs_code">
<pre><input [(ngModel)]="uname" (ngModelChange)="doUnameChange()" placeholder="请输入用户名" ></pre>
</div>
</div>
<div>ngModelChange：监听模型数据的改变</div>
<h4>5、angular核心概念4：过滤器/管道</h4>
1）、Filter：用于在View中呈现数据时显示为另外一种格式，过滤器的本质是一个函数，接收原始数据转换为新的格式输出：function(oldVal){return newVal}
使用过滤器：{{ e.sex| 过滤器名 }}
angular2.x中，过滤器更名为 "管道(Pipe)"
自定义管道的流程：
　①、创建管道class，实现转换功能
<div class="cnblogs_code">
<pre>import { Pipe } from '@angular/core';
@Pipe({
name: 'sex',
})
export class SexPipe {
// 管道中执行过滤任务的是一个固定的函数
transform(val: number,lang='zh') {
if (val === 1) {
 return '男';
} else if (val === 0) {
 return '女';
} else {
 return '未知';
}
}
}</pre>
</div>
　②、在模块中注册管道
<div class="cnblogs_code">
<pre>// app.module.ts中注册声明
import { SexPipe } from './sex.pipe';
declarations:</pre>
</div>
　③、使用管道(可以使用 : 进行传参)
<div class="cnblogs_code">
<pre>性别过滤器：{{ 0 | sex:'en' }}</pre>
</div>
创建管道的简便方式：ng g pipe 管道名
2）、预定义管道
angular中提供了几个预定义管道：lowercase、uppercase、titlecase、slice(切割字符串，其他显示为...)、json(object序列化为json字符串)、number(number:'4.2-3' 表示保留4位整数，保留至少2位小数，最多保留3位小数)、currency:'￥'(表示金额前加￥符号)、date(date:'yyyy-MM-dd HH:mm:ss')
3）、创建对象
  ①、手工创建式 -------  自己创建  new
  ②、依赖注入式 -------  无需手工new，只需要声明依赖
<h4>6、Angular核心概念5：服务和依赖注入</h4>
1、Service：angular认为组件是与用户交互的一种对象，其中内容都应该与用户操作有关的；而与用户操作无关的内容都应该剥离出去，放在“服务对象”中，为组件服务。例如：日志记录、计时统计、数据服务器的访问等。
提供者就会创建被依赖的对象，注入给服务需要者。
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230617185021064-1253367456.png">
 第一步：构建服务对象并指定服务提供者。
<div class="cnblogs_code">
<pre>import { Injectable } from '@angular/core';
// 所有的服务对象都是"可被注入的"
@Injectable({
providedIn: 'root', //指定当前服务对象在"根模块"中提供--AppModule
})
export class LogService {
doLog(action: string) {
let uname = 'admin';
let time = new Date().getTime();
console.log(`管理员：${uname} 时间:${time} 动作:${action}`);
}
}</pre>
</div>
第二步：在组件中声明依赖，服务提供者就会自动注入进来，组件直接使用服务对象即可。
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core';
import { LogService } from '../log.service';
@Component({
selector: 'app-myc07',
templateUrl: './myc07.component.html',
styleUrls: ['./myc07.component.css'],
})
export class Myc07Component {
// 依赖注入：组件--服务使用者，必须声明依赖
log;
constructor(log: LogService) {
this.log = log;
}
doAdd() {
let action = '添加新的商品：xxx';
this.log.doLog(action);
}
}</pre>
</div>
2、使用Angular官方提供的服务对象——HttpClient Service
HttpClient：服务对象用于向指定URL发送异步请求，使用步骤：
①、在主模块app.module.ts中导入HttpClient服务所在的模块
<div class="cnblogs_code">
<pre>import { HttpClientModule } from '@angular/common/http';
imports:</pre>
</div>
②、在需要使用异步请求的组件中声明依赖于HttpClient服务对象，就可以使用该对象发起异步请求了。
<div class="cnblogs_code">
<pre>constructor(private http: HttpClient) {}//依赖注入
// 观察者模式
this.http.get(url).subscribe((res) => {
console.log('得到了订阅的异步响应消息', res);
});</pre>
</div>
面试题：前端有哪些异步请求工具？
①、原生XHR
const xhr = new XMLHttpRequest()   浏览器支持的原生技术，基于回调方式处理响应，有回调地狱的问题。
②、jQuery.ajax()
　本质还是XHR，进一步封装而已，使用上比原生要简单，基于回调方式处理响应。
③、Axios
    本质还是XHR，比原生要简单，基于“Promise”处理响应，请求可以排队也可以并发。
④、Angular HttpClient
　底层也是XHR，比原生简单，基于“观察者模式”处理响应，请求可以排队、并发、撤销。
⑤、Fetch
　本质不再是XHR，是W3C提出的新技术，有望取代XHR，目前部分浏览器不支持。天然基于Promise。
3、高阶话题：服务对象的作用范围
　  声明服务提供者的方式：
　　①、在根模块中提供服务对象——在整个应用中服务是单例。
<div class="cnblogs_code">
<pre>@Injectable({
providedIn: 'root',
})</pre>
</div>
　　②、在组件中提供服务对象——在每一个组件实例中，服务都有一个实例。
<div class="cnblogs_code">
<pre>@Component({ 　 ... providers:
})</pre>
</div>
注意：项目中只要服务对象中有属性，只能用方式②，否则推荐使用方式①。
 
<h4>扩展TypeScript</h4>
1、TS对属性和方法的访问定义了3种访问修饰符：
private：私有的，私有成员只能在本类内部使用。
protected：受保护的，只能在本类内部和子类的内部使用，其他地方不允许。
public：公共的，公共成员可以在本类内部和外部使用。
提示：一般情况下，class内属性不应该让外界随意访问，通常设置为private；方法一般运行调用，通常设置为public。 
下面2种写法作用相同：
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230618104140755-1429049036.png">
 2、类和接口，class和interface
interface：特殊的类，要求某个class必须具备XX方法，例如管道类必须提供transform方法。
<div class="cnblogs_code">
<pre>/**
* 要求小汽车必须提供start和stop方法
*/
interface Runnable{
start:Function,
stop:Function
}
export class Car implements Runnable{
start(){}
stop(){}
}</pre>
</div>
<h4>7、生命周期</h4>
生命周期钩子函数调用的顺序：
1）、constructor：组件对象被创建时
2）、ngOnChanges()：组件绑定的属性值发生改变
3）、ngOnInit()：初始化指令/组件完毕——类似于Vue中的mounted
4）、ngDoCheck()：组件检测到了系统对自己的影响
5）、ngAfterContentInit()：组件内容初始化完成
6）、ngAfterContentChecked()：组件的内容发生变化需要检查
7）、ngAfterViewInit()：组件的视图初始化完成
8）、ngAfterViewChecked()：组件的视图发生变化需要检查
9）、ngOnDestroy()：组件即将被销毁（从DOM树上卸载），适合执行一些资源释放性语句。
<h4>8、组件间的数据通讯</h4>
1、父子间的组件传递：vue和angular中的父子间消息传递原理一样，都可以使用口诀：'Props Down Events Up'
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230618171307096-690868056.png">
 
2、子传父：子通过触发特定的事件，把数据传递给父组件，父组件提供事件处理的方法
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230618171213865-789625064.png">
父子组件传值的简便方式：父亲直接使用子组件的引用
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230618175819751-1441047594.png">
 提示：ViewChild装饰器用于将子组件识别符与某个属性关联起来，第一个参数必须是已经存在的子组件识别符(带#)，第二个参数是static指定组件是否为“静态组件”——不会时有时无的组件。
注意：通过ViewChild方式父组件可以获得子组件中的任意数据——一定程度上违反了“最少知识法则”。
<div>
<div><code>@ViewChild</code>的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到<code>@ViewChild</code>容器中，你可以想象成依赖注入的方式注入。</div>
<div>只不过<code>@ViewChild</code>不能在构造器<code>constructor</code>中注入，因为<code>@ViewChild()</code>会在<code>ngAfterViewInit()</code>回调函数之前执行（可以在<code>ngAfterViewInit生命周期钩子中获取到改子组件的实例</code>）</div>
<div> </div>
</div>
<h4>9、路由和导航</h4>
多页面应用：一个项目中有多个完整的HTML文件，使用超链接跳转——销毁一颗DOM树，同步请求另一颗，得到之后再重建新的DOM树；不足：DOM树会重复创建，间隔中客户端一片空白。
单页面应用：整个项目中有且只有一个“完整的”HTML文件，其他页面都只是DIV片段。整个项目中客户端只需要下载一个HTML页面，创建一个完整的DOM树，页面跳转都只是一个div替换另一个div而已——能够实现过场动画。不利于SEO访问优化。
1）、angular定义路由步骤：
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230618190528567-1705915135.png">
 注意：
　　①、路由词典中的路由地址不能以 / 开头或结尾，中间可以。
　　②、路由中可以指定一个默认首页地址: { path:' ' }。
　　③、路由词典中每个路由要嘛指定component，要嘛指定redirectTo，同时需要指定路由匹配方式pathMatch。
　　④、路由 ** 匹配所有地址。该地址只能用于整个路由词典的最后一个。
2）、路由跳转/导航
　　路由跳转的方式：
　　方式1、使用模板方法
<div class="cnblogs_code">
<pre>


<a routerLink="/ucenter">进入用户中心</a>
<button routerLink="/ucenter">进入用户中心</button></pre>
</div>
　　方式2、使用脚本方法
　　Router类是RouterModule提供的一个服务类，声明依赖即可使用。
<div class="cnblogs_code">
<pre>// 服务注入
import { Router } from '@angular/router'
constructor(private router: Router) {}</pre>
</div>
<div class="cnblogs_code">
<pre>this.router.navigateByUrl('/url');</pre>
</div>
3）、路由参数的获取
<div class="cnblogs_code">
<pre> constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe((data) => {
 console.log('得到了订阅的路由参数：', data);
});
}</pre>
</div>
4）、路由嵌套
5）、路由守卫
　　某些路由地址只能在特定条件下才能访问。
        ng g guard xxx
　　步骤：
　　①、创建路由守卫class
<div class="cnblogs_code">
<pre>@Injectable({
providedIn: 'root',
})
export class LoginGuard{
canActivate(){
 return true//允许激活 
 }
}</pre>
</div>
　　②、在路由词典中使用守卫
<div class="cnblogs_code">
<pre>path: 'ucenter',
component: UserCenterComponent,
canActivate: , //导航守卫</pre>
</div>
<h3> </h3>
<h3> angular移动开发</h3>
创建移动APP可用的技术：
<img src="https://img2023.cnblogs.com/blog/2338509/202306/2338509-20230619122951236-152195934.png">
 关于三大框架的组件/资源库：
github上搜索 awesome vue、awesome  angular、awesome react
UI组件库——ionic
<h3>Rxjs解决异步</h3>
1、回调函数解决异步
<div class="cnblogs_code">
<pre>function getPromiseData(cb:Function){
setTimeout(()=>{
let userName = '张三'
cb(userName)
},1000)
}
// 使用
getPromiseData((data:string)=>{console.log(data);
})</pre>
</div>
2、promise
<div class="cnblogs_code">
<pre>function getPromiseData(){
return new Promise((resplve,reject)=>{
setTimeout(()=>{
 let userName = '张三'
 resplve(userName)
},1000)
})
}

getPromiseData().then(res=>console.log(res))</pre>
</div>
3、rxjs获取异步方法：比Promise要强大，可以中途撤销，可以发射多个值，提供了多种函数工具等。
<div class="cnblogs_code">
<pre>import {Observable} from "rxjs"
function getRxjsData(){
return new Observable((observe)=>{
setTimeout(()=>{
 let userName = '张三'
 observe.next(userName)
},3000)
})
}

getRxjsData().subscribe(data=>{
console.log(data);
})</pre>
</div>
1）、unsubscribe
<div class="cnblogs_code">
<pre>const stream = getRxjsData()
const d = stream.subscribe(data=>{
console.log(data);
})
// 取消订阅
setTimeout(()=>{
d.unsubscribe()
},1000)</pre>
</div>
2）、多次执行
　　以下代码promise其实只会执行1次
<div class="cnblogs_code">
<pre>function getPromiseIntervalData(){
return new Promise((resolve)=>{
setInterval(()=>{
 let userName = '张三'
 resolve(userName)
},1000)
})
}</pre>
</div>
　　使用rxjs：会源源不断的执行
<div class="cnblogs_code">
<pre>function getRxjsIntervalData(){
return new Observable((observe)=>{
setInterval(()=>{
 let userName = '张三'
 observe.next(userName)
},1000)
})
}</pre>
</div>
3）、rxjs提供的工具函数map、filter
<div class="cnblogs_code">
<pre>import { filter, map } from 'rxjs/operators';
function getRxjsData() {
let count = 0;
return new Observable((observe) => {
setInterval(() => {
 count++;
 observe.next(count);
}, 1000);
});
}

const stream = getRxjsData();
stream
.pipe(
filter((val) => {
 if (val % 2 === 0) {
 return true;
 }
 return false;
})
)
.subscribe((data) => {
console.log(data);
});</pre>
</div>
  
来源：https://www.cnblogs.com/nielifang/p/17485966.html

頁: [1]

琼殿技术论坛's Archiver

angular入门