ng2的深入

来源:互联网 发布:红警2点网络进不去 编辑:程序博客网 时间:2024/06/06 12:32

ng2是基于ts的,而ts的写法又有箭头方式。对于很多开发者来说,这个箭头式写法就比较难懂,当然这个难懂是针对刚入门。
现在就以我目前做的模拟数据项目来说,我这项目是用Ng2+primeng框架来写的,整个项目框架则是用jhipster快速生成的,重点主要讲ng2的使用。
在使用ng2中现在主要写法是简洁目的,所以现在有用链式写法以及箭头函数式写法。
链式写法:.xxx().cc().vvv();这种写法就是链式写法,前面一个方法的结果作为后一个方法的参数或者说需要操作的目标,一次类推。
箭头函数:()->system.out.print();或者()->{方法体},使用说明:箭头左边的括号内是指方法的参数,如果有参数则自己定义,最好不要加参数类型,让编译器去根据上下文推断。箭头右边是指一个方法内需要执行的方法体,如果只有一句代码或者只有一个返回值并没其他多余的代码则可以直接写,连return这个关键字都可以省略。
ng2主要分,service,model,component、html 这几个组成。
component主要就是作用于当前的@component()函数内的html内容。
model的作用是作为获取到后端的数据对象时用来保存的类型。可以理解为bean。
service的主要作用是写与后端交互的请求方法。
—————————————————————————————————
service类要在component中使用,需要先import 进来,然后在constructor()方法中作为参数对象传进来,需要写明参数类型。这样就可以在component中引用了。当然,在service类中需要写export关键字。
这里写图片描述
举个栗子,在这里我在每个模块中都有这几目录结构,component文件夹中主要放置html文件以及对应的component.ts文件。model文件夹中就放置类对象的属性定义。service文件夹中就放置用来跟后端交互的service类。而index.ts文件则把下面两个文件往外层拋。

export * from './member-info.module';export * from './member-info.routes';

这两句就是index.ts中的代码。
下面两个文件一个是模块化@NgModule()定义,组件类以及service类都要在这模块定义中import进来,然后在declarations数组中引入组件名,providers数组中引入service类名定义,imports数组中引入其他需要导入的模块名这里写图片描述

另一个就是路由定义这里写图片描述。从图中可以看出,需要导入组件对象,路由是一个常量的路由数组对象,children数组对象是指member-info路由的下一层。最后都需要export关键字作为向外层抛出。
这样写项目结构的好处就是易懂明了。
大家写代码时有可以会经常报看不懂的错误,而这些错误大部分是可能是因为没有在外层声明定义,比如service类在component中引用,但是忘了在@NgModule函数模块中声明。还有一个就是页面上使用[(ngModel)] 双向绑定时,绑定的对象还未定义或者没有,再或者直接先[(ngModel)]="" 这样子都会报错的,而且报错的原因很难看出来。所以当暂时没有对象需要双向绑定时就先不要写。

如有写错或者说不明白的还望指出!

0 0
原创粉丝点击