前端开发_7.Angular学习总结

前言

学习链接

Angular.js

https://www.runoob.com/angularjs2/angularjs2-architecture.html
https://ngnice.com/docs/getting-started
https://angular.cn/start
http://v2.angular.cn/
https://www.cnblogs.com/peterYong/tag/angularJS/

RxJS

https://v7.rxjs.tech/guide/overview
https://blog.ralph.wang/articles/23a34d9e_RxJS_%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/

node -v  npm -v
npm install -g @angular/cli//使用 npm 命令安装 CLI 
ng new my-app//创建工作空间和初始应用
ng new routing-app --routing --defaults//应用为routing-app
ng generate component first//生成组件ng g c first
ng serve --open && -o//启动服务器
ng serve --port 4201//指定端口启动服务器
ng g p pipes/test//管道生成。
ng generate service cart//生成服务 ng g s cart
要停止此 ng serve 命令，请按 Ctrl + c 键
ng build//此命令会创建一个 dist 文件夹，其中包含把你的应用部署到托管服务时所需的全部文件

1 npm uninstall -g angular-cli
清除缓存，确保卸载干净
2  npm cache clean --force
3 .检查是否卸载干净 ng -v    若显示command not found则卸载干净
3.1 卸载完后 全局安装 最新版本angular cli 
安装指令：npm install -g @angular/cli@latest
4 npm uninstall --save-dev angular-cli
5 npm install --save-dev @angular/cli@latest
6 npm install
7 ng -v 查看版本  
ng new my-project --style less --routing --package-manager yarn
"npm", "yarn", "pnpm", "cnpm"  

一、 AngularJS是什么、基本语法?

* Google开源的 前端JS 结构化 框架
* 动态展示页面数据, 并与用户进行交互
* AngularJS特性(优点)
	* 双向数据绑定
	* 声明式依赖注入
	* 解耦应用逻辑, 数据模型和视图
	* 完善的页面指令
	* 定制表单验证
	* Ajax封装

Angular 2 应用程序应用主要由以下 8 个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模板：
使用@NgModule 装饰器的类，几个重要属性：
declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
imports - 本模块组件模板中需要由其它导出类的模块。
providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。

---

• 使用插值语法显示值使用双花括号 {{ }}
• 属性绑定,要绑定的属性放在[]中，
• Attribute 绑定attr.

//模板引用变量 #
.ts文件：
currentCustomer = 'Maria';
itemImageUrl='.png';
isUnchanged=true;

.html文件：
<h3>Current customer: {{ currentCustomer }}</h3>
<hr>
<img alt="item" [src]="itemImageUrl">
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
<!--  expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<!-- Notice the colSpan property is camel case -->
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>

//类和样式(style 前缀)绑定
<p [ngClass]="classes">类和样式绑定</p>
//单一类绑定
[class.sale]="onSale"//onSale 为真值时，Angular 会添加类，当表达式为假值时，它会删除类
//多重类绑定：string,object,array<string>
[class]="classExpression"
classExpression="my-class-1 my-class-2 my-class-3"
classExpression="{foo: true, bar: false}"
classExpression="['foo', 'bar']"
//绑定到样式,string、object
<nav [style]='navStyle'>
  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
  <a [style.text-decoration]="linkStyle">Login</a>
</nav>`
navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
linkStyle = 'underline';
activeLinkStyle = 'overline';

<input #customerInput>{{customerInput.value}}

>事件绑定：
<input [value]="currentItem.name"
       (input)="currentItem.name=getValue($event)">
getValue(event: Event): string {
  return (event.target as HTMLInputElement).value;
}

二、在模板中使用管道 （|）

管道操作符

//内置的管道
1. DatePipe	根据区域设置规则格式化日期值。
2. UpperCasePipe	把文本转换成全大写形式。
3. LowerCasePipe	把文本转换成全小写形式。
4.CurrencyPipe	把数字转换成货币字符串，根据语言环境中的规则进行格式化。
5.DecimalPipe	把数字转换成带小数点的字符串，根据语言环境中的规则进行格式化。
6.PercentPipe	把数字转换成百分比字符串，根据语言环境中的规则进行格式化。

案例：
birthday: number = Date.now();
<p>The hero's birthday is {{ birthday | date:'yyyy-MM-dd hh:mm:ss' }}</p>

三、栗子：

1. http://localhost:4200/first-component?name=234
2. 用 …/ 符号来上升一个级别 ，使用 ./ 或者不带前导斜杠来指定当前级别。
3. {{ … }}、[src]、[ngSwitch]、*ngFor 、*ngIf、 (click)、(keyup.enter)、(blur)、[(ngModel)]、(ngSubmit)、#box