AngularJS学习笔记(一)

来源:互联网 发布:php bug管理系统 编辑:程序博客网 时间:2024/03/29 04:11

AngularJS简介

什么是AngularJS

AngularJS是一个开发动态web应用的框架。

创新之处在于:通过数据绑定和依赖注入减少代码量。

AngularJS是为了扩展HTML在构建应用时本应具备的能力而生的。

解决动态应用和静态文本不匹配的两中通常解决方案:

  • 类库——代码起主导作用,可以决定何时调用类库   jQuery
  • 框架——框架起主导作用,可以决定何时调用代码   knockout,ember

AngularJS解决方案:

尝试去扩展HTML结构来弥合以文档为中心的HTML和实际Web应用所需要的HTML之间的鸿沟。AngularJS通过指令(directive)来扩展HTML结构。

  • 通过{{ }}来绑定数据
  • 使用DOM控制结构来进行迭代或隐藏DOM片段
  • 支持表单和表单验证
  • 将逻辑代码关联到DOM元素上
  • 将一组HTML作为可重用的组件

一个完整的前端解决方案

能够处理所有写过的混杂了DOM和AJAX的代码,并能将其组织的结构良好

  • 构建一个CRUD应用时可能用到的技术:数据绑定、基本模板指令、表单验证、路由、深度连接、组件重用、依赖注入
  • 可测试性:单元测试、端对端测试、模拟对象(mocks)、测试工具
  • 拥有一定目录结构和测试脚本的种子应用

AngularJS适合的应用开发

AngularJS考虑的是构建CRUD应用。游戏或者有图形界面的编辑器,会频繁的进行复杂的DOM操作,不适合AngularJS

AngularJS信念

声明式的代码用在构建用户界面和组装软件,命令式代码用在展现业务逻辑

  • 将应用逻辑和DOM操作解耦,大大提高可测试性
  • 平等看待应用的测试和开发,测试的难度很大程度上取决于代码的结构
  • 将前端与服务端解耦,使得前端和服务端的开发可以起头并进,实现两端代码的重用
  • 在整个应用的开发流程中指导开发者:从用户界面设计到实现业务逻辑,再到测试
  • 化繁为简,化整为零

AngularJS规避的麻烦

  • 使用回调:回调会降低代码的可读性,是代码变得零散
  • 以编程的方式操作DOM:操作HTML DOM是AJAX应用中很基础的一部分,但他不灵活并且容易出错
  • 在用户界面中读取数据:AngularJS去除了整个AJAX操作流程中重复的代码,使代码看起来只是在描述所有的执行流程,而不是具体的实现细节
  • 在开始前写大量的初始化代码:AngularJS以类似于Guice的方式进行依赖注入,这会让你很快的进入功能开发。另外你还能完全控制自动化测试的初始化过程。

参考:

  1. Angular是一个以易测试为目的的框架,所以我们更倾向于与TDD开发。

  2. Angular是个MDW/MDV框架,作为jQuery使用者如何学习Angular:How do I “think in AngularJS” if I have a jQuery background?

  3. Angular和Ember区别:Client-side MVC: Is Angular.js or Ember.js the better choice for Javascript frameworks?

  4. 了解前段技术的发展史:前端开发技术的发展




0 0