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

  • 相关阅读:
    网页的摘要信息
    自我介绍
    DIV和SPAN的区别
    软件工程简介
    设置层的漂移
    构建之法现代软件工程
    手机验证码的相关知识
    Python2和Python3的区别
    我的第一个练习
    结对编程后传之做汉堡
  • 原文地址:https://www.cnblogs.com/harelion/p/8323783.html
Copyright © 2020-2023  润新知