angular自带的一些api_Angular2.0正式版api使用漫谈

ng2综述

ng2的rc版本和今年9月中旬发布的2.0.0正式版本,在核心思想上面是有些变动的。

为了降低原来使用angular1的开发者切换到angular2的成本。

谷歌angular2团队在架构angular2的过程中,在权衡纯components组件化开发还是ngModule system之间的比重上面做了不少妥协。

个人的项目开发体会

确实,我在写ng2-tutorial的过程中,内心还是有些感慨的。

毕竟自己是angular2在rc-1版本的时候就开始使用了,所以最近在迁移正式ng2版本的过程中,要重写几乎原来的1/5代码,代价比较大。

不过,angular2的正式版本相比rc版本,在开发理念上面充分照顾了国内的angular1开发者,

除了纯typescript语法外,angular2在原来的模块体系上增加组件化开发的概念,优化了路由体系及解析算法,同时在多处引入了按需加载的概念。

在此,笔者还是推荐国内的开发者将angular1迁移到angular2,虽然迁移成本比较高,但是worth it。

ng2核心api漫谈

ngModule

NgModule的概念

NgModule是angular2应用中最topLevel的概念,它将angular应用划分为紧密连接的函数模块。

NgModule的使用

1.所有的ng2模块都是一个通过 @NgModule装饰的类。

2.@NgModule接受的参数是一个元数据。

3.这个元数据的作用是指导angular2 compiler如何处理angular 模块。

4.这个元数据的主要key值包括如下(由于英文解释比较迂回,笔者进行了二次解释)。providers :定义模块的依赖注入

declarations : 定义模块内部需要依赖的directives pipes

imports : 引入模块解析必须依赖的directives pipes

exports :导出模块间互通的directive等接口

entryComponents : 入口组件,在声明定义时就会进行编译

bootstrap : 初始化的模块,默认会自动加入entryComponents数组

这个通过@NgModule定义出来的module,使用bootstrapModule方法运行后,即可完成ngModule分支搭建的小型angular2应用。

Components

Components的概念

Components是angular2应用中组件化的代表,它是继ngModule后的第二个核心概念:组件。

Components的使用

1.类似NgModule,所有的ng2组件都需要@Component来定义

2.@Component接受的参数是一个元数据。

3.这个元数据的作用是指导angular2 compiler如何处理angular组件。

4.这个元数据的主要key值包括如下template :组件字符串,可以通过require('html')的形式引入,配合webpack的raw-loader来处理。

styles : 组件字符串样式数组,同样通过require('css/less/scss')

viewProviders : 组件template依赖的directive等片段化对象。

这个通过@Components定义出来的Components,使用export class的形式,即可被一个angular模块添加到@NgModule的declarations里面,完成它加载进ngModule的使命。

Router

Router的概念

Router是angular2应用中对比市面上的react-router等比较出色的路由,直观而易用。

Router的使用

1.在使用Router的时候,需要将RouterModule添加进ng2模块的imports,提供模块的路由指令。

2.Router支持嵌套路由,异步加载,场景转换等。

3. router-outlet 是angular2渲染组件路由的路标系统,相关path对应的component会查找它并渲染。

4.一个基本的Router配置数组如下:

path : 即路径,类似location.path

component : 相关path需要加载的组件

children : 子路由

总结

angular2的开发模式遵守严格的规则,这样可以让开发者都依循它的设计理念来开发业务模块。

对于熟悉angular1的开发者而言,迁移到angular2的主要成本在于typescript和components思想的转变。另外,国内关于ng2的论坛和相关资料也比较少,使用ng2需要开发者有一定的英文基础。

具体的ng2构建web应用教程,可以参考如下链接

angular中文社区,github账号

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值