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

  1. 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务
  2. 如果自定义指令想要接收从外部传入的值,需要使用@Input装饰器\. 可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字 内部还是使用原来的名字
  3. 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器
  4. 如果要通过指令控制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

本文分享自微信公众号 - 生南星(gh_36d61425a5dc)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap typeahead 输入填充 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • iOS开发:字符串处理:截取字符串、匹配字符串、分割字符串

    分享一个比较基础的知识点,记录一下,以备以后使用的时候查找方便,现在岁数大了,脑子不好使了,记忆力减退,年轻人可以忽略此博客。本篇要分享的是关于iOS开发中,字...

    三掌柜
  • bootstrap 表单验证 不为空验证

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap typeahead 异步从后台提取数据 常用 *

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap select 多选 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • 你的前端开发的优势是什么?

    每个前端开发都要有自己的优势,总结一下我的优势,1、工作年限长、经验多;2、基础相对扎实;3、逻辑思维能力合格;4、业务需求分析能合格。基本上就这四点吧,一般来...

    web前端教室
  • bootstrap tooltip

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> ...

    用户5760343
  • bootstrap 颜色选择器

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootSt...

    用户5760343
  • bootstrap 搜索框 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 干货 | 前端如何实现业务解耦,携程酒店查询首页的1.0到3.0

    何金,携程酒店研发部Android资深软件开发工程师,负责酒店代码性能优化、结构改造、疑难问题排查处理,以及Kotlin的推广和应用。

    用户1292807

扫码关注云+社区

领取腾讯云代金券