Angular2学习笔记一
TypeScript:
TypeScript变量声明:let和const是JavaScript里相对较新的变量声明方式,const是对let的一个增强,它能阻止对一个变量再次赋值。
var作用域或函数作用域
let是词法作用域或块作用域
使用var声明时,它不在乎你声明多少次;你只会得到1个
Angular2:
1、组件:
组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。
1、{{hero.name | uppercase}} 绑定表达式中的 uppercase 位于管道操作符( | )的右边,用来调用内置管道 UppercasePipe。
2、[(ngModel)] 是 Angular 的双向数据绑定语法。它属于一个可选模块 FormsModule,你必须自行添加此模块才能使用该指令。
3、Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。
4、*ngFor 是一个 Angular 的复写器(repeater)指令。 它会为列表中的每项数据复写它的宿主元素。
5、@Injectable() 装饰器会接受该服务的元数据对象,就像 @Component() 对组件类的作用一样。
6、让构造函数保持简单,只做初始化操作,比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。 它当然不应该调用某个函数来向远端服务(比如真实的数据服务)发起 HTTP 请求。
7、 Angular HttpClient 的方法会返回 RxJS 的 Observable
8、Observable.subscribe() 异步操作
9、Angular 只会绑定到组件的公共属性。
10、*ngIf 只有在有消息时才会显示消息区。
11、在 Angular 中,最好在一个独立的顶级模块中加载和配置路由器。
12、使用 RouterModule 中的 Routes 类来配置路由器。
13、典型的 Angular 路由(Route)有两个属性:
path:一个用于匹配浏览器地址栏中 URL 的字符串。
component:当导航到此路由时,路由器应该创建哪个组件。
14、RouterModule.forRoot() 在应用的顶级配置这个路由器。 forRoot() 方法会提供路由所需的服务提供商和指令,还会基于浏览器的当前 URL 执行首次导航。
15、路由出口 (RouterOutlet)。
16、routerLink 是 RouterLink 指令的选择器,它会把用户的点击转换为路由器的导航操作。
17、location 是一个 Angular 的服务,用来与浏览器打交道。
18、从路由信息中获取id: const id = +this.route.snapshot.paramMap.get('id');
JavaScript 的 (+) 操作符会把字符串转换成数字。
route.snapshot 是一个路由信息的静态快照,抓取自组件刚刚创建完毕之后。
paramMap 是一个从 URL 中提取的路由参数值的字典。
19、反引号 ( ` ) 用于定义 JavaScript 的 模板字符串字面量。
Angular2学习笔记一的更多相关文章
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
- Angular2学习笔记(1)——Hello World
1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
- Angular2学习笔记——Observable
Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...
- Angular2学习笔记——在子组件中拿到路由参数
工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
- angular2 学习笔记 ( Http 请求)
refer : https://angular.cn/docs/ts/latest/guide/server-communication.html https://xgrommx.github.io/ ...
随机推荐
- Day 19 re 模块 random模块,正则表达式
https://www.cnblogs.com/Eva-J/p/7228075.html#_label10 findall search match方法 和 search相比 match自带 ^ se ...
- Android 美学设计基础 <1>
在做原型的时候,和设计师交流的过程中,发现在设计安卓交互的过程中,其实是存在一些基本规则的.那这些规则,可以保证第一应用美观,第二不会出现反人类的开发难度,第三,用设计师的话说就是可能会有“最好的体现 ...
- firebug中html显示为灰色的原因总结
1.被设置了display:none. 2.长.宽都为0.
- Flask从入门到精通之Flask表单
Flask请求对象包含客户端发出的所有请求信息.其中,request.form 能获取POST 请求中提交的表单数据.尽管Flask 的请求对象提供的信息足够用于处理Web 表单,但有些任务很单调,而 ...
- gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
- SnapKit 约束创建过程
 创建ConstraintViewDSL 调用UIView 的 snp 方法,生成一个ConstraintViewDSL. 注意这个生成的ConstraintViewDSL持有UIView. 创建C ...
- 关于MyBatis的工作流程和与JDBC的比较与Hibernate的比较
一.传统的JDBC的方式 1.从一个jdbc程序开始 public static void main(String[] args) { Connection connection = null; Pr ...
- Java之集合(三)ArrayList
转载请注明源出处:http://www.cnblogs.com/lighten/p/7291339.html 1.前言 本章介绍List中最常用的一个类--ArrayList.在第一章中已经介绍了Li ...
- Java之IO(二)BufferedInputStream和BufferedOutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/6971234.html 1.前言 本文主要介绍输入输出流中的BufferedInputStream和Buffere ...
- Spring Security构建Rest服务-1203-Spring Security OAuth开发APP认证框架之短信验证码登录
浏览器模式下验证码存储策略 浏览器模式下,生成的短信验证码或者图形验证码是存在session里的,用户接收到验证码后携带过来做校验. APP模式下验证码存储策略 在app场景下里是没有cookie信息 ...