Skip to content

Latest commit

 

History

History
56 lines (34 loc) · 5.5 KB

introduction.md

File metadata and controls

56 lines (34 loc) · 5.5 KB

Angular是什么?

Angular是架构良好的一个Javascript框架,用于动态Web应用的开发。它可以让你把HTML作为你的模板语言,同时可以让你扩展HTML的语法,简明清晰地表达出你应用组件的效果。Angular的数据绑定以及依赖注入很大程度上减少了你要写的代码。而且这些事情都交由浏览器处理,使得它和所有的Web后端技术都能很好的搭配。

Angular是为HTML在构建动态Web应用时缺失的那部分能力而设计的。对静态文档而言,HTML是一门很好的声明式语言。但它在构建动态Web应用上所能做的事情并不多,因此在开发Web应用时往往需要使用一些技巧来让浏览器按我们所希望的方式工作。

通常,我们通过以下手段来解决Web应用与静态文档的差异所带来的问题:

  • 类库:一些有助于Web应用开发的函数集。这种情况你的代码起主导作用,并由它在合适的地方调用这些类库。比如jQuery就是一个类库。
  • 框架:Web应用的一种特定实现,你的代码用来填充一些实现的细节。这种情况框架起主导作用,并在需要一些具体的应用信息的时候调用你的代码。比如durandalember等都是框架。

Angular采取了另一种方法。它试图通过创建新的HTML结构来弥补以文档为中心的HTML以及Web应用实际需求之间的鸿沟。Angular通过一种我们称之为directives的指令来让浏览器识别新的语法。比如:

  • 通过{{}}进行数据绑定。
  • 通过DOM控制结构来对DOM片段进行重复,显示或隐藏。
  • 支持表单以及表单验证。
  • 为DOM元素添加新的行为,比如DOM的事件处理。
  • 将HTML组合成可重用的组件。

一个完整的前端解决方案

Angular并不是整个Web前端解决方案中单独的一部分。你之前需要写一些DOM和AJAX混杂的代码来完成的事情,Angular都能帮你用结构组织良好的代码来做到。这让Angular在创建CRUD(创建,读取,更新,删除)应用的时候方案相当的固定。但尽管如此,它也试图确保你能轻易的按你自己的想法对方案做出改变。Angular提供以下现成的功能:

  • 构建一个高内聚的CRUD应用你所需要的所有东西:数据绑定,基本的模板指定,表单验证,路由,深度链接,重用组件以及依赖注入。
  • 可测性:单元测试,端到端测试,模拟测试以及测试工具。
  • 带初始目录结构和测试脚本的种子应用。

Angular最佳使用场景

Angular通过给开发者呈现更高层次的抽象来简化应用的开发。和其他的抽象一样,它也带来灵活性的损失。换句话说,并不是所有的应用都适合用Angular开发。Angular就是为CRUD应用设计的。所幸的是,绝大多数Web应用都是CRUD应用。了解Angular的优势所在同样帮助我们了解什么应用不适合用Angular进行开发。

以游戏和图形界面编辑器为例,这类大量繁复操作DOM的应用,与CRUD应用有明显区别,因此可能并不适合使用Angular进行开发。这些场景下,使用像jQuery这类抽象层次更低的类库可能更为合适。

Angular之道

Angular建立在这样一种观点之上,即声明式代码比命令式代码更适合构建用户界面和连接软件组件,而命令式代码则能很好的表达业务逻辑。

  • 把应用逻辑与DOM操作中解耦能极大改善代码的可测性。
  • 把应用的测试看待的与应用开发同等的重要。测试的难度很大程度上取决于代码的组织方式。
  • 将应用的前端与后端解耦。这样前端与后端能够并行开发,而且前后端的代码都可以实现重用。
  • 框架在开发者开发整个应用的过程中全程引导:从用户界面设计,到编写业务逻辑,再到最终的测试。
  • 细分任务总是好的。

Angular将你从以下苦海中释放出来:

  • **注册回调:**使用回调使你的代码变得杂乱,让人很难从中找到想要的代码。移除像回调这类常用的模板代码是件好事,它能极大的减少你要写的Javascript代码,提高你应用代码的可读性。
  • **通过编程的方式操作DOM:**操作HTML DOM是AJAX应用的基础,但它繁琐而且容易出错。用声明的方式让用户界面根据你应用状态的变化而变化,从而把你从低级的DOM操作中释放出来。大多数用Angular开发的应用,都不需要自己写代码去做低级的DOM操作,尽管你也可以这么做。
  • **在用户界面上读写数据:**AJAX应用绝大部分操作都是CRUD操作。比如从服务器上获取数据封装成一个内部对象,再以HTML表单形式显示并允许用户修改表单,接着再验证表单,显示验证错误,表单验证通过后把数据封装回内部对象中再返回服务器,这样一个流程产生了大量的模板代码。Angular能消除几乎所有的这些模板代码,留下描述整个应用流程的代码而不是所有的实现细节。
  • **在刚开始开发的时候就要写一大堆初始化的代码:**通常来说你要写很多基础代码来让一个基本的AJAX应用"Hello World"运行起来。使用Angular你可以很简单的使用services来初始化你的应用,这些services会以Guice这种类型的依赖注入方式被自动注入到你的应用当中。这让你可以快速的进行功能开发,而且还让你能够完全掌控自动化测试的初始化过程。