学习AngularJS 1.x

Learning AngularJS 1.x

本书是我在学习和应用AngularJS 1.x 的过程中的资料梳理。希望能对大家学习AngularJS有一定帮助。

  1. 如果您在阅读过程中，有任何疑问或者发现错误，可联系：
  2. 作者： Harry<harry@andtoo.net>
  3. 微信： hharry

本书地址

本书使用GitBook和GitHub托管。

GitBook地址：hairui219/learning_angular

GitHub地址：hairui219/learning_angular

本书的读者

本书会介绍如何应用AngularJS，但是本书不会涉及到JavaScript语法以及HTML和CSS的布局模式。因此，本书对读者有一定的前置技术要求：

  1. 您需要知道和理解HTML和CSS布局的方法
  2. 您需要知道JavaScript的基本语法
  3. （推荐）您知道一些Node.js的使用方法
  4. （推荐）您知道控制台命令如何使用

如果您需要对以上某方面内容入门，我向您推荐W3School网站。您可以在这个网站上快速的了解相关的知识。

另外，在JavaScript方面，如果您有一定的PHP经验，我向您推荐这本书（如果您没有PHP经验，这本书也可以阅读）：

  • JavaScript for PHP Developers (中文版) - Stoyan Stefanov 著 - 李强 译

这本书只有141页（定价28元，网站还有折扣），阅读起来非常轻松，如果您有编程经验，一个下午就可掌握JavaScript的基本语法和用法（同时也可能学会PHP的语法）。

京东特价优惠时我购买了几十本与JavaScript相关的书籍，这本是我认为最靠谱的入门书。

我应用AngularJS的方法

在进行前端开发的工作之前，我担任过几年的移动互联网产品经理，设计了几款应用（参与了一小部分的开发工作）。之后我改做应用和手机游戏的后端开发（主要使用PHP）。

在这几年的工作经验中，我形成了一套app的构建思路。因此，在制作网站前端时，我也希望采用类似的方法（我不喜欢直接在php代码中直接嵌入html模板的方案，那样做感觉上比较混乱，难以管理。

因此，我将AngularJS作为一个类似于app的载体，当网站代码在客户端载入完成后，再通过api请求获取数据。

这样做的好处

这样实现后，我认为主要有以下几个方面的好处：

  1. 数据通过API(https)获取，过程并不向用户开放，起到了隐蔽后端服务器的效果
  2. 可以对API的访问限制和安全性进行更完善的设计实现
  3. 前端网站托管在阿里云的OSS上（以静态网站的方式部署），这样页面部分不再占用服务器的流量和空间
  4. 便于之后的扩展，前端网站可以使用阿里云的CDN直接进行访问加速；后端在使用API模式通讯的情况下，本来就可以极大的提高负载能力（网络带宽优化），如果需要扩展，可以提高机器配置或者增加机器数量。

幸运的是，AngularJS推荐这么做。

为什么选择AngularJS 1.x

对于选择AngularJS，业(zhi)界(hu)其实有一个调侃的说法：

写Java的写不来JavaScript的用AngularJS

虽然这个说法比较武断，但是其中也体现出来一个明显的信息，如果你之前有Java或其他后端语言的编程经验，AngularJS是让你快速上手Web前端开发的很好的选择。至少对我而言是如此。

我选择AngularJS的历程

以下内容部分读者可能会感到有些偏激，但是这是对我（一个拥有一些其他编程经验的前端入门者）的心路记录。

2015年初，在准备通过完全的Web方式实现一个B/S模式的企业服务网站之后，我开始进行技术方面的准备。在此之前，我只有Android客户端和PHP服务端的工作经验。另外，我对web的基本开发技能使用过一些，掌握了HTML+CSS的一些应用技巧。JavaScript的语法和基本特性方面也通过Node.js在工作中的应用熟悉了。

但是，在网站前端技术准备过程中，我发现我对DOM的操作一窍不通。即使是购买了若干本入门的书籍，通过阅读书籍，我知道了如何通过document.getElementById(‘xxx’)或者jQuery的$(‘xxx’)来获取元素和填入代码之类的工作。但学会基本的语法之后，我仍然是对于具体如何操作DOM来实现具体的功能完全没有头绪。这是一种什么感觉呢？就像是在读大学时学习C/C++/Java语言，我们可以手工的去实现一些基本的算法或数据结构。但是学完了之后，我们可以直接使用C/C++或Java制作基于Windows的客户端程序了吗？一点也不。学习DOM入门给我的感觉与之一模一样。

因为当时并不知道还有JavaScript框架这种东西存在，我去网上搜索教程时也是一头雾水。因此，我想了一个笨办法，直接在一个国外的网站上购买了一套后台管理系统界面的模板。浏览了下源代码之后，我发现源码提供了两套版本，一套完全基于jQuery+BootStrap的版本，和一套基于AngularJS的版本。两个版本的界面布局一模一样，但是基于AngularJS的版本提供了一些如单页应用（在同一个界面直接刷新部分界面而不是整页刷新）的特性。

然后便是一系列的在网上搜索了解AngularJS的过程，看完它基本的Tutorial（PhoneCat）之后，我马上被它的特性震惊了。因为，

  1. AngularJS的整个结构体系非常符合我的思路
  2. 双向绑定的特性实在是太和我胃口了，这让我完全不用再操心DOM

因为这两点特性，我义无反顾的加入了使用AngularJS的大军。

题外话：

国外网站购买的这种模板，都是由专业的前端人员开发，提供的功能都非常丰富完整。另外，他们对管理工具的使用也很正规（使用bower或其他工具来管理第三方库等），代码结构和注释也非常完善。

对我而言，这笔投资绝对物有所值（当时花费了我19美金）。

接下来我所做的事情，就是拿着这个模板的代码，修改html和增加controller/service，调整ui-router的配置，最终完成了网站的第一个版本。花的时间大约是2个月出头（前端+后端+部署调试，开发工作全部由我一人完成）。

从今天来看，我的做法完全不符合AngularJS的最佳实践。虽然我未在网站中使用jQuery等类库，但是我也同样没有使用AngularJS推荐使用的directive方式（完全没有使用，这也是我准备在更深入的学习AngularJS和重新构建网站的第二版的主要原因）。

但是，不管怎么说，我把东西做出来了，而且整个网站是可用的，从程序结构上也是可维护和修改的。

为什么写这本书

由于业务需要，我准备重新制作网站的v2版本。在这个版本中，会有很多新的功能需求（功能扩大非常多）。因此，完全重构整个网站是可以接受的。另外，我之前只是误打误撞的制作出来一个”可用”的网站，为了使用更地道的方式制作这个新版网站，我现在正在重新学习AngularJS。

写这本书，一方面是为了记录学到的AngularJS的技术，便于我日后查询；另一方面也是为了给自己一点压力，让自己沉下心来掌握这门技术。

我在AngularJS方面也是一名菜鸟，虽然我会尽力保证信息的正确性，但也还请您在阅读的过程中批判的接收信息。如果有何问题，请通过邮件或微信联系我（联系地址在此页面上方）。

另：为什么没有选择Angular 2

其实在重构时，我优先的选择是Angular 2 & TypeScript。因为它引入了很多新的特性，比如应用了最新的ES标准，大量优化了Angular工作的效率等等。

但是，下面3个原因导致了我放弃了Angular 2作为新版本网站的技术选择。

  1. 我自认为是一个比较追求新技术的人，但是当我测试Angular 2时，发现我电脑上安装的Chrome v44版本无法运行，当我下载更新到v47后才能正常运行（官网介绍v46以上才支持es6）。
  2. 新版本Angular 2抛弃了controller/service，完全用directive，这点与我的技术构想不符。
  3. 即使在我评估Angular 2时已经是beta版本，但是官网仍然推荐不要将其用于生产环境。

我的网站运行的是对公业务，且对合作方使用的浏览器有一定的影响能力，但是我没有信心让所有客户都安装上Chrome的最新版本。

与我技术构想不符则是对我本人来说更重要的一个原因，因为我无法认同Angular 2的优化方向。同时，根据我的工作经验来看，这样革命性的优化通常是内部一群理念不合的人另起炉灶，结果可能喜忧参半，不一定会最终成功。

TypeScript的引入我不好评价，但是强类型定义和模型化并不太符合我的业务模式（api一次性获取界面需要的所有数据，这些数据已经在服务端进行好了类型定义和完整性处理，本地主要是实现对CRUD的调用）。

综上，我放弃了在新版本的网站中应用Angular 2技术，而选择继续使用AngularJS 1.x。

版权声明 LICENSE

  1. 署名-非商业性使用 4.0 国际
  2. 版权所有 (c) 2016 Harry<harry@andtoo.net>
  3. 本作品采用知识共享 署名-非商业性使用 4.0 国际 许可协议进行许可。访问
  4. http://creativecommons.org/licenses/by-nc/4.0/ 查看该许可协议。
  6. Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)
  7. Copyright (c) 2016 Harry<harry@andtoo.net>
  8. This work is licensed under the Creative Commons Attribution-NonCommercial 4.0
  9. International License. To view a copy of this license, visit
  10. http://creativecommons.org/licenses/by-nc/4.0/.

来源(书栈小编注)

https://github.com/hairui219/learning_angular