浅谈Angular
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
1.准备工作:
①全局安装 Angular CLI。创建项目:
要想使用 npm 来安装 CLI，请打开终端/控制台窗口，并输入下列命令：
npm install -g @angular/cli
②创建工作区和初始应用:ng new 文件名
③启动开发服务器:cd 文件名 ng serve --open
2. Angular里的数据绑定:
1.插值表达式 {{}}--括号里可填表达式,不能填语句!
例:<h2>你好,{{msg1}}</h2>
2.属性绑定 []
a.html属性绑定
1.语法:[attr.html属性名] = '值' 2.css类绑定 [class]='表达式' [class.类名]='布尔值' [ngClass]=对象 3.style样式绑定 [style.样式名]='表达式' [ngStyle]=对象
b.dom属性绑定
(a.html属性绑定 表示的是当前值 b.dom属性绑定 表示的是初始值 大部分属性都是一一对应的,既有DOM属性,也有HTML属性 但有一小部分属性,只有HTML属性没有DOM属性 就算DOM属性和HTML属性名字一样,那也不是同一个东西)
3.事件绑定 ()--如果想要获取事件对象,传入$event
例:<button (click)="doClick($event)">点击</button>
angular里,默认的数据绑定是单向的,即Model向View 如果要实现双向绑定,需要使用到ngModel指令 语法: [(ngModel)]='值' ***直接写指令,在angularJS里会报错,需要人为的引入FormsModule模块
3.指令:
结构型指令 1.*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么? ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除结构型指令 *ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么? ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除
*ngFor--动态创建DOM结构
ngSwitch--通过匹配case来控制元素的显隐
- 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务
- 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\. 可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字
- 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器
- 如果要通过指令控制DOM的显隐,需要在指令内部获取到宿主元素和承载宿主元素的容器,通过依赖注入templateRef和ViewContainerRef服务
4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等) 语法: 元数据 | 管道名
<!--大小写转化--><h2>{{'hello,world!' | uppercase}}</h2><h2>{{'I AM CHINESE' | lowercase}}</h2>
<!--格式化日期时间对象--><h2>{{nowDate | date:'yyyy-MM-dd HH:mm:ss'}}</h2>
<!-- 处理数字 number 参数:整数最少位数.小数最少位数-小数最多位数--><h2>衣服的价格是:{{398.123789 | number:'4.2-4'}}</h2><!-- 处理货币 currency 参数一:货币符号 美元 'USD',欧元 'EUR' 参数二:布尔值,是否显示货币的符号,默认true 参数三:整数最少位数.小数最少位数-小数最多位数--><h2>当前比特币的价格是:{{5000.123456 | currency:'JPY':true:'5.1-4'}}</h2>5.Angular里路径传值:
<!--1.查询参数传值 利用queryParams属性传值--> <a [routerLink]="['/product']" [queryParams]="{proName: '华为Meta X', proPrice:19888}">商品展示</a> <!--2.路径参数传值,直接把要传递的参数写到routerLink的对应的值数组里,需要对路由配置做设置--> <a [routerLink]="['/product', '小米9',3000]">商品展示</a>参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新 解决办法: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个值,一旦该值被订阅,如果其存储的数据发生变化,订阅者就会收到通知,进而做出对应的处理 注意点: AngularJS里,并不是所有的值都可以被订阅,只有Observable类或者Observable的子类创建出的对象可以被订阅 subscribe是Observable类下的一个函数。从Observable的中文名:”可观察的”就能看出，Observable的作用是可以起到类似监听的作用，但它的监听往往都是在跨页面中，
6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性,要声明在子组件里 2.子向父 -- @Output装饰器声明事件,要声明在子组件里 3.兄弟之间 -- 中间人模式
拓展:事件源对象
在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。
// IE下：window.event.srcElement 标准下：event.targetdiv.onclick = function (e) {var even = e || window.event;var target = event.target || event.srcElement; Angular参考网址: https://www.angular.cn/guide/quickstart