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，现在还是一知半解，就算写代码也还是需要不时对照文档，没有系统性的认知，还需要深入学习。