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，如今仍是只知其一;不知其二，就算写代码也仍是须要不时对照文档，没有系统性的认知，还须要深刻学习。