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

  • 相关阅读:
    ....
    CodeForces 375A(同余)
    POJ 2377 Bad Cowtractors (最小生成树)
    POJ 1258 AgriNet (最小生成树)
    HDU 1016 Prime Ring Problem(全排列)
    HDU 4460 Friend Chains(bfs)
    POJ 2236 Wireless Network(并查集)
    POJ 2100 Graveyard Design(尺取)
    POJ 2110 Mountain Walking(二分/bfs)
    CodeForces 1059B Forgery(模拟)
  • 原文地址:https://www.cnblogs.com/harelion/p/8323783.html
Copyright © 2011-2022 走看看