Angular之旅:启程
2017-02-06 12:21
106 查看
angular的架构:
Angular的中文网站上对于A有过一段这样的话:“ 我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML
模板,用组件类管理这些模板,用服务添加应用逻辑,用模块打包发布组件与服务。 ”(当然此时的文档已经全面升级为2.0版本,具备1.5之前的知识似乎并不是那么必要)我们看看这里面有什么值得我们学习和记忆的:
其实他的整体似乎很清晰,我们要做的是利用A扩展语法(指令)编写位于示意图上方的Template(模板),作为HTML的一部分,他可以很好的实现视图的表达,而这需要Directive(指令),如果你曾经读过A相关的早期书籍,指令这个鼎鼎大名的可以被用作创作包括元素,属性,注释等等的包括核心指令,自定义指令在内的方法,你一定不会陌生,同时示意图也指示了一点,就是新版本A对元数据对象有明确定义,这其中就包括Directive和Component(组件)。A最大的改动莫过于从1.x过渡到1.5版时,1.5增加了用于替代Control(控制器)的Component。继续看示意图,你会发现组件中需要添加依赖,即Dependency
Injection(依赖注入),而这些依赖的来源多数是Service(服务)。无数个(或者有限个)服务汇聚成一个完整的组件。我并不想在此解释服务和注入,因为他们(目的)都是一回事,就是为了让组件可以具备处理应用逻辑的能力(各类服务,“ 服务是一个广义范畴,包括:值、函数,或应用所需的特性。 ”),如同那段红色标记清晰。既可以直接使用组件,在其内部定义应用逻辑,也可以将应用逻辑拆分至服务。
以上就是A的简单的架构内容,当然关于Data Binding(数据绑定),需要关注和了解的是在组件定义的属性(成员)如何表示在模板中表示出来,最简单的方式就是通过插值表达式 (符号“ {{}} ”) 来绑定属性名。当你对数据事件驱动的架构还不是很敏感的时候,我希望你可以看看小程序的文档,页面同样是被数据驱动的(准确说则是呈现由数据驱动组件产生的页面),怎么解释这句话呢。为了解放过度DOM的操作,将注意力集中在业务逻辑(数据层面)上,MVC的方式被引入到前端中,使得呈现视图的DOM可以交给框架去完成(是否可以把这个当作Model层和View层能够被解耦的合理解释呢)。当然,对于Angular,把他解释为MVVM才更加合适吧,响应式编程和双向数据绑定。MVVM的架构示意图:
Angular的中文网站上对于A有过一段这样的话:“ 我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML
模板,用组件类管理这些模板,用服务添加应用逻辑,用模块打包发布组件与服务。 ”(当然此时的文档已经全面升级为2.0版本,具备1.5之前的知识似乎并不是那么必要)我们看看这里面有什么值得我们学习和记忆的:
其实他的整体似乎很清晰,我们要做的是利用A扩展语法(指令)编写位于示意图上方的Template(模板),作为HTML的一部分,他可以很好的实现视图的表达,而这需要Directive(指令),如果你曾经读过A相关的早期书籍,指令这个鼎鼎大名的可以被用作创作包括元素,属性,注释等等的包括核心指令,自定义指令在内的方法,你一定不会陌生,同时示意图也指示了一点,就是新版本A对元数据对象有明确定义,这其中就包括Directive和Component(组件)。A最大的改动莫过于从1.x过渡到1.5版时,1.5增加了用于替代Control(控制器)的Component。继续看示意图,你会发现组件中需要添加依赖,即Dependency
Injection(依赖注入),而这些依赖的来源多数是Service(服务)。无数个(或者有限个)服务汇聚成一个完整的组件。我并不想在此解释服务和注入,因为他们(目的)都是一回事,就是为了让组件可以具备处理应用逻辑的能力(各类服务,“ 服务是一个广义范畴,包括:值、函数,或应用所需的特性。 ”),如同那段红色标记清晰。既可以直接使用组件,在其内部定义应用逻辑,也可以将应用逻辑拆分至服务。
以上就是A的简单的架构内容,当然关于Data Binding(数据绑定),需要关注和了解的是在组件定义的属性(成员)如何表示在模板中表示出来,最简单的方式就是通过插值表达式 (符号“ {{}} ”) 来绑定属性名。当你对数据事件驱动的架构还不是很敏感的时候,我希望你可以看看小程序的文档,页面同样是被数据驱动的(准确说则是呈现由数据驱动组件产生的页面),怎么解释这句话呢。为了解放过度DOM的操作,将注意力集中在业务逻辑(数据层面)上,MVC的方式被引入到前端中,使得呈现视图的DOM可以交给框架去完成(是否可以把这个当作Model层和View层能够被解耦的合理解释呢)。当然,对于Angular,把他解释为MVVM才更加合适吧,响应式编程和双向数据绑定。MVVM的架构示意图:
相关文章推荐
- Angular Local Storage 使用方法
- angular 学习之路1
- AngularJS for login
- Angular 基础知识规整之路由
- 理解Angular的作用域(译)
- 【Angular】——灵活权限下门户路由跳转
- AngularJs 多语言的使用 angular-translate
- Angular组件交互的3种方式
- angular数据验证:自定义指令
- AngularJS +Ionic 移动端开发 二
- Angular—ng-class
- 《Angular与ng-zorro结合》
- AngularJs ui-router 路由的简单介绍
- Angular12 学习angular2前的热身准备
- Angular find controller from element or no element
- angular的post请求,SpringMVC后台接收不到参数值的解决办法(参考加自创)
- 自己创建一个angular2工程(起步阶段)
- Angular2里获取(input file)上传文件的内容的方法
- angular使用bootstrap方法手动启动
- angular之表单验证ngMessages