浅谈Angular

2019-07-20 13:34:12 浏览数 (1)

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来控制元素的显隐

  1. 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务
  2. 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器. 可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字
  3. 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器
  4. 如果要通过指令控制DOM的显隐,需要在指令内部获取到宿主元素和承载宿主元素的容器,通过依赖注入templateRef和ViewContainerRef服务

4.管道:pipe 作用:对数据进行处理(删除,插入,过滤,拼接等) 语法: 元数据 | 管道名

代码语言：javascript复制
<!--大小写转化--><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里路径传值:

代码语言：javascript复制
<!--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。

代码语言：javascript复制
// 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

angularjs html javascript rxjs

0 人点赞