AngularJS学习笔记

最近换了工作,新环境主推AngularJS4,学习其他之余,看了AngularJS的教程,有备无患。
笔记主要基于Angular2,其中观点只是目前的感受,也许经过正式项目之后,会有更全面的看法。

1. AngularJS的优点

  1) 规范了HTML元素的绑定方式与页面上的数据传递,页面元素的所有操作都被限制在框架内,以规定的语法结构进行处理。
  2) 分离出了单独的前端进程,专门用于处理不涉及服务器存储数据的页面交互,分流了服务器上原本的后端进程的负载。

AngularJS以完善的框架抹平了不同开发人员对于DOM、jQuery等的理解,所有业务代码都是基于相同的运行环境,也许细节上仍会存在编程风格的不同,但并不影响全局结构的相似,代码的长期可维护性得到了很大的提升。
以目前来看,这么重的框架,更适合团队开发,用于个人项目有大材小用,本末倒置之感。

 

2. AngularJS框架结构
AngularJS的设计结构类似MVC,通过声明不同的结构类,将对应的代码注册到进程事件循环的不同阶段,来实现模块加载、数据处理、数据绑定直至HTML渲染,页面显示。
以框架结构切割代码,业务代码的聚合则是出现在单独某一个结构类中。

主要的结构类有Component、Module和Service三种,以目前的理解,业务代码的执行主要依靠项目的入口Component(app.component.ts)的模板中引用业务Component所定义的HTML标签,进而引用业务HTML模板和对应的交互逻辑来实现。
而相对的,AngularJS项目中的index.html文件,存在的意义似乎只是为了引用项目的主标签app-root,也许存在同时运行多个app的场景?待验证。

AngularJS中的结构类主要有以下几种:

1) Component
定义了页面HTML模板和主要的页面交互逻辑,数据绑定过程的直接执行者。
定义在Component子类中的属性和方法可以直接在HTML模板中引用,实现数据的双向绑定和HTML元素的交互事件(onclick, mouseover等HTML元素事件,在AngularJS中都有对应的directive)
Component的子类需要注册到Module中才可以被主Component引用。
Component主要负责将数据处理成适合进行展示的格式,或是收集页面数据汇集成适合后台逻辑处理的格式,并不负责直接进行数据存取,这部分工作主要由Service进行。

2) Service
Service的设计目的是为了进行数据存取过程,无论是位于本地还是远程,Service在工作过程中,以单例模式被多个Component共用。
定义为Service的类,都需要被@Injectable()装饰器进行修饰,内部原理暂时不明,猜测是为了实现Service单例共用而定义的框架内部逻辑。

3) Module
一个项目中只有一个NgModule,其中定义了业务Component、公共Service和其他第三方AngularJS插件的引用接口,只有在Module中声明过的模块,才能在Component中被引用。


其中各部分执行不同程序的引用
imports 主要定义AngularJS内核以及插件中的各类模块
bootstrap 定义项目的主Component(一般是AppComponent)
declarations 定义业务Component,也需要包括AppComponent
providers 定义各类共用的Service

 

3. angular-cli的使用
在Angular2中,可以使用angular-cli以命令行的方式创建项目和各种组件

ng new {project_name} 新建项目,自动生成目录和基本的结构文件
ng server 使用预设配置文件中的配置启动项目
ng generate component {component-name} 新建一个Component,生成基本的Component声明代码,并将该Component注册到NgModule中
ng generate service {service-name} [--module={component-name}] 生成新的Service,如果指定了--module,会将该Service注册到指定的NgModule中

 

4. 其他
Angular1和Angular2的学习笔记,杂七杂八记了两个文档,真正拿出来时,能系统整理的就只剩下这么一点。
其他的HTML模板语法、directives甚至TypeScript,现在还是一知半解,就算写代码也还是需要不时对照文档,没有系统性的认知,还需要深入学习。

 

posted @ 2018-01-21 11:47 harelion 阅读(...) 评论(...) 编辑 收藏