02引言-AngularJS基础教程

0. 目录

1. 前言

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了,所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足。

AngularJS的初衷是为了简化web APP开发,精髓是简单。但是国内外有很多AngularJS的教程,都着重讲AngularJS的强大之处,从而增加了AngularJS学习的难度,本教程试图用通俗的语言讲解最为基础最为实用的内容,简化学习进程、降低学习难度是本教程的初衷。

本系列教程以翻译Chris SmithAngualr Basics为梗概,融合博主自己的理解,为大家提供一个简单明了的学习教程。本文为系列教程第2篇引言,翻译自Introduction

  1. 引言-Introduction
  2. 基础-Basics
  3. 控制器-Controllers
  4. 作用域-Scopes
  5. 集合-Collections
  6. 模块-Modules
  7. 依赖注入-Dependency Injection
  8. 服务-Services
  9. 过滤器-Filters
  10. 指令-Directives
  11. 指令作用域-Directive Scopes
  12. 路由-Routing
  13. 通信-HTTP
  14. 结论

2.正文

这是一本袖珍书,灵感来自于其他免费、简短、友好的编程书,例如Alex MacCaw的《The Little Book on CoffeeScript》。我写这本书的目的是像我学习AugularJS那样介绍它,关注典型环境的快速web开发中如何应用AngularJS。依据帕累托原则Pareto principle), 优先讲简单、实用的功能,课程结束之后,您可能只了解AngularJS的一部分,却可以利用该框架轻松创建强大的前端应用。本书是一个动态网站,所有案例使用最新版的AngularJS(Angular 1.3.14),如果您倾向于交互学习,那么修改代码指令,您可以实时的看到运行效果,鼓励大家进行探究性、实验性学习。

如果您想了解更多我为什么写这本书,了解AngularJS的历史,AngularJS是否适合您的项目,请继续阅读本文,如果您非常确定您为什么阅读本文,急于学习AngularJS请移步系列教程第03篇基础。

2.1 AngularJS 难或易?

我有近十年的web MVC的工作经验,从 Struts 到Spring MVC到Ruby on Rails到Backbone,我甚至还写了一本Backbone and CoffeeScript方面的书,因此我自认为学习AngularJS起来肯定非常简单。但是,当我沉浸在API和文档中时,我发现各种各样不熟悉的名词和术语(transclusion, directive, and isolate scope)阻碍了学习进程,当我阅读官方文档和教程时,所谓的简单易学好像没有出现,反而是一头雾水,比如说下面这段折磨人的文字。

The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

现在官方文档里面已经没有这段文字了,通过AngularJS官方团队的不懈努力,官方文档的可读性进一步增强了很多。但是,当我第一次阅读时,这段文字让我感觉非常无知,好像走进了一个新的领域,我感觉到AngularJS是一个复杂的技术(没有开玩笑), AngularJS的各种细节在广泛的被讨论,难以调试、怪癖、陷阱等。

像任何自尊自爱的程序猿一样,我撸起袖子奋战到底,慢慢地我熟悉了那些名词和术语,以为学习必然有点陡。直到有一天,我看到AngularJS的创始人Miško Hevery的视频采访,根据Hevery的解释,我发现了一个简单而又重要的事实:

使用简单是AngularJS的初衷

Hevery解释道,当他构思AngularJS时,把它作为非编程人员仅仅使用预定义的标签就能创建动态web应用的工具。我才意识到,我卷入了太多的AngularJS的细节而没有获得相应的收益。Angular项目及相关社区在相互协作方面投入太多精力,增加了Angular的复杂性和学习的难度,我们需要探索更好的使用方式以趋近于Angular的开发初衷,去除大量的精巧设计的控制,不考虑微弱的内部安全隐患,直接向前。

对我来说这个方法是正确的,尽管Angular不是我唯一的web开发语言,但绝对是最闪耀的那个。

2.2 您需要Angular吗?

虽然类似于Angular的客户端js工具让创建单页面应用变得如此简单,但是不少web项目仍然使用传统的架构,服务端渲染、jQuery实现交互。坦率的讲,您需要考虑您的项目是否需要在客户端管理数据、渲染html,您是否有足够的理由开始尝试一项新的技术。

当然,Angular是一个明显的、固执己见的选择(Angular is a broad, opinionated solution)。虽然通常被认作一个库,但是Angular内置的对模块化、依赖注入的支持,将会改变您的项目管理方式。如果你想找一个Angular的替代方案,或许更加成熟的,或许最佳的,但是这些都不可能完全替代Angular。除非您的项目肯定能达到Google工程师认为的经典的水准,你可能不需要达到Angular核心团队认定的组织支持的水平。依赖注入尽管可以用在单元测试方面,但还是太过复杂,大家可以到Dependency Injection 看看实在的案例。

当您需要引入非Angular代码和Angular的数据绑定和渲染机制协同工作的话,将会产生另一个问题,您需要非常深入这些神秘的细节。相对来说,Backbone基于jQuery,更加简单、更加易于理解,如果您的项目深度依赖jQuery,利用Backbone实现渐进增强也是一个不错的选择。

另外,Angular在UI组件和模型对象之间的双向绑定,也会增加应用的复杂性。Facebook的开发者分享了双向数据绑定中的挫败感:

我们发现双向数据绑定容易导致级联更新: 一个对象的改变导致另一个对象的改变,甚至更多对象的改变。随着应用的增长,由用户行为导致的级联更新将会很难预测。

相对于Angular来说,尽管Facebook的 React不重在关注渲染,但是基于React的客户端技术也值得一试。

2.3 使用Angular的理由

Angular可能是当今最流行的Javascript MV*解决方案,github得到了36722个star,当然阅读本文时可能更多。它迅速从同类的解决方案中脱颖而出,成为顶级解决方案,大家可以到TodoMVC project比较诸多MV*方案。让我们来看看Angular成功的原因。

  • 快速成型(Immediate productivity)
    如果您的项目需要用户界面实现数据的增删改查操作,Angular可以非常漂亮地兑现快速成型的承诺。仅仅需要在普通的html添加几个属性,使用少量的几行javascript代码你就可以实现普通类库需要大量技能、大量努力才能实现的功能。
  • 熟悉度
    Angular包含开发人员熟知的原生JS和几乎普通的HTML,用几乎这个词主要是因为Angular引入了一些新增的html元素,属性和一些可能看起来恐怖的行内代码。相对于其他模板系统,Angular已经非常接近html了,大部分开发人员都能够轻松理解。
  • 适应性
    Angular可以很好支持当前的UI核心的JS类库,如果想使用类似于Bootstrap这样的流行类库的话,您可以有效利用AngularUI这样的第三方项目实现简单整合。所以,无论你想为传统文档中心网站增加交互性,还是开发一个炫彩的单页面应用,Angular都可以是一个不错的选择。
  • 未来标准
    尽管我不能确定Angualr能达到什么高度,Angular母公司Google会如何创造未来,有一点非常明确,Angular的使用方式非常接近目前提出的标准 Web Components,另外,Angular接近于下个版本Javascript的特征(例如Object.observe)它的基础原则将会被维持而不会弃用。
  • 社区
    当然,一个非常重要的原因是它非常流行,应用于大量的超负荷网站中,Google的定力支持,大量的插件和学习资源。当然大部分人的正确选择不一定是每个人的正确选择,你还需要谨慎考虑Angular是否真的适合您。

2.4 关于本书

很多年前当我在My MacBook Air上阅读一本JS编程书时,已经有了脚本书( ScriptyBooks)的点子。需要运行书中的一个案例时,我们从网站中下载案例,着急于如何打开它,从大量的文件中找到需要的文件,费劲九牛二虎之力找到正确的文件,打开它,修改它,但是很可能你还是不能运行,你可能需要安装支持环境。

为什么我们在讲解一个前端技术时,还需要耗费诸多努力才能运行一个案例,如果能够可以在书中展示代码,允许您进行修改,并且实时展示代码呈现结果,那就很美妙了。

本书采用这样的方式。所有代码均可以动态修改,并实时展示代码运行结果。如下所示。

<strong>The lucky number {{3 + 5}}.</strong>

The lucky number 8.

我利用 CodeMirror 和Angular实现动态交互功能,如果还是angular菜鸟,不妨修改下上面的代码,看看会发生什么(博客支持技术有限,本教程没有提供动态修改代码功能,望见谅。请阅读原教程代码)。

2.5 接下来

接下来,准备讲解客户端模板(client-side templating)和双向绑定(two-way bindings),向您展示Angular的基础。尽管大部分代码非常简单,一眼看过去就可以理解,但相信哪怕有经验的Angular开发人员也可以有所收获。

3.声明

前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖!
欢迎任何形式的转载,烦请注明装载,保留本段文字。
本文原文链接,http://blog.csdn.net/whqet/article/details/44596577
欢迎大家访问独立博客http://whqet.github.io

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页