ANGULAR2架构详解架构详解
Angular2是一个完整的单页应用开发框架。很多人拿它跟React比,相比来说,React是一个基础框架,更像是一个库,你需
要很多第三方的库才能方便的开发一个完整的应用。而Angular2则提供了很多组件,或者叫库,比如Directive(指令)、组件框
架、模板、依赖注入、绑定、路由等,在这些库的帮助下,你更多的只需要关注具体业务的开发。
当你编写一个Angular2的应用的时,你从一个Component开始,编写这个Component需要展示的页面模板,并在Component
中控制模板上显示的内容和用户的交互。一般还需要编写一个service来实现业务逻辑。你还需要针对这个模板编写一个样
式。最后,你需要把这个Component和service定义到一个module(模块)里。
这样就完成了这个应用模块的开发。剩下的就是用Angular提供的方法去启动应用的 root module ,也就是根模块。如果你的
应用有几个模块需要交互或跳转,就需要定义路由。
所以,你只需要开发业务相关的Component组件,以及组件之间的数据交互和页面跳转,剩下的像页面文件的渲染、变量的
双向绑定、用户事件的响应、页面的跳转和参数传递等等,都由框架来完成。
在这篇文章里,我们就来看看Angular2框架背后提供的一些功能,了解了这些,有助于我们理解一个Angular应用是怎么工作
的,从而帮助我们更好的利用框架,开发出更高质量的应用。
Angular2框架,提供了以下几个基本的功能:
1.模块
2.组件
3.服务
4.模板
5.数据绑定
6.依赖注入
模块是一个业务功能的集合,我们可以把几个组件、服务和其他一些业务模型的定义都加到一个模块里,他的功能更多的是帮
助我们更好的组织我们的代码,方便代码重用。模板、数据绑定、依赖注入是定义一套这个框架的规则和语法,我们用这套规
则和语法编写的代码,就能够享受Angular2给我们带来的便利。
模块
Angular2的模块可以将组件、服务、指令、方法等封装成一个模块,如下图所示(图片摘自官网):
比如我们开发一个系统,里面包含一个”我的消息”的功能,这个功能包含一些组件,如消息列表、详细详情、回复、新消息和
好友列表等。除了这些组件,我们又需要相应的服务来跟服务器交互来提供数据。我们可能也需要一些环境变量等。我们可以
把这些组件、服务等都封装在一个方法里面,像这样:
在上面的模块定义中,我们又引入了一个 FriendModule ,因为好友的功能在另一个模块里,我们不需要重新实现,而只是引
入他既可以。我们也可以只引入好友模块里面的某一个组件,也可以只引入服务。
在MessageModule中,在 exports: [MessageListComponent] 中导出了MessageListComponent,这样,别的模块可以使用这
个组件,来显示消息列表。
在应用的根模块中,除了上面的这些’imports’,’providers’这些定义以外,还有一个 bootstrap: [AppComponent] ,表示这个应