如何学习Angular

AngularJS(通常称为Angular)是一个非常强大的前端开发框架,用于构建复杂的JavaScript应用程序。虽然学习Angular会有巨大的回报,但我敢肯定,许多想要开始学习Angular的人,都已经把掌握Angular的愿望扼杀在萌芽状态,因为它可怕而复杂角的文档。这很遗憾,因为Angular提供了这么多:

  • 模块化,允许一个开发团队同时处理应用程序的特定部分
  • 应用程序各个部分的可测试性和可维护性
  • 一个由热爱Angular的开发者和组织组成的庞大而繁荣的社区
  • 将应用程序的UI与其逻辑完全分离,同时保持它们的同步
  • 双向数据绑定——这是纯粹的魔法(或者巫术?)——每当模型发生变化时就更新UI(反之亦然)
  • 有用的开箱即用(以及第三方开发的)模块,如过滤器和服务,可以降低数据处理、ui模板、处理HTTP请求、消毒和验证用户输入、动画等工作的复杂性

而这只是冰山一角!如果你决定学习Angular,你将被赋予开发跨平台应用所需的技能,而你新发现的超能力将在未来几年被证明是有价值和有利可图的。下面是一个指南(我称之为路线图),旨在帮助你有效地学习Angular。

我使用这个路线图的目标是绘制一个精心设计的免费在线资源课程,将你温和地引入Angular的世界。我想创建一个自学指南,激励你继续追求更高层次的Angular专业知识。完成本学习指南后,你可以期望对Angular有熟练的理解,并有能力使用它来构建JavaScript应用程序。

我不想拐弯抹角,学习Angular是一项艰苦的工作。在这项艰巨的任务中,预计会遇到许多障碍。但我鼓励你坚持下去。

你的努力和来之不易的战斗伤痕都是值得的,因为Angular会在你的工作和你的开发技能中嵌入如此多的价值。你准备好了吗?让我们开始吧!

首先,你需要了解JavaScript

有效地使用Angular需要你了解JavaScript的基础知识。更重要的是,你从Angular中获得的价值将与你在JavaScript方面的熟练程度成正比。我不建议在对JavaScript没有基本了解的情况下学习Angular。

婉转地说,如果你不懂JavaScript,这个任务将会困难100倍。其他web开发框架对那些对JavaScript没有深刻理解的人更宽容一些。例如,jQuery对用户隐藏了一些更复杂的JavaScript概念。

现在,这不是这是一件坏事,但对许多开发人员和某些类型的开发项目来说,这实际上是件好事。(为了进一步强调我前面的论点,jQuery是使用Facade软件设计模式构建的,定义由著名的JavaScript开发人员和谷歌工程师Addy Osmani在他的书中作为一个设计模式“提供了一个方便的高级接口到一个更大的代码体隐藏它真正潜在的复杂性。)相比之下,Angular则暴露了JavaScript强大而优雅的特性——但往往难以理解/被误用。Angular并不回避JavaScript的复杂性;它拥抱他们,把他们推向极限。

如果你需要学习或温习JavaScript,请先从以下文章开始:

这里有一线希望。回顾我自己进入Angular世界的旅程,我可以自信地说,它帮助我成为了一名更好的JavaScript程序员。使用Angular鼓励我进一步理解高级JavaScript概念、技术和设计模式。

废话不多说,下面是我学习Angular的路线图。

学习Angular的路线图

下面是学习使用Angular的五个步骤免费的在线资源。我已经使用这些资源来获得对Angular的胜任级理解。我承认我还有很长的路要走,但这些资源已经帮助我在正确的轨道上开始了。

如果您愿意,可以从您个人感兴趣的资源开始。但是,请记住,我故意构造这个指南的目的是帮助你慢慢地使用Angular。在错误的时间使用错误的资源,你可能会失去继续探索Angular的动力。

步骤1:使用Angular.js

使用Angular.js”width=目标:来获得一个对Angular世界的温和、实用的介绍。每当我尝试学习某样东西时,我最初的目标是对我正在学习的东西有一个全面的了解,然后尽快动手去做。我希望尽可能避免设置和配置。这一目标有两个原因。

首先,我可以立即决定我是否认为这是一种潜在的值得学习的技能,而无需投入太多时间。第二个原因是快速启动和运行通常会使任务更吸引人、更有趣、更有动力。使用Angular.js——由Angular的开发者和维护者谷歌赞助的免费代码学校视频课程——符合要求。

这门在线课程是一个结构良好且高效的Angular入门课程。在本课程中,你将构建一个简单的Angular应用。在整个课程中穿插着编码挑战,以帮助你复习所讨论的关键概念。

在开发应用的过程中,你会了解到Angular的一些强大特性,比如指令、双向数据绑定、服务等等。

步骤2:由ScriptyBooks编写的Angular基础

由ScriptyBooks编写的Angular基础”width=目标:学习Angular的主要概念和特性。AngularJS的官方教程和文档(我们将在后面讨论)非常详细和彻底。对我来说,官方文件的问题在于它非常枯燥和吓人。

对于像我这样没有计算机科学正式学术背景的人来说,这尤其没有吸引力。我理解Angular团队对项目文档的详细和彻底的需求。通过其文档的全面和技术,他们避免了歧义问题,并允许用户找到他们需要的所有信息。

但对于大多数人来说,我的观点是学习Angular必须从第三方内容开始。除了AngularJS文档之外,还有其他更适合新手的学习资源。免费在线书籍角基本知识就是这样一个学习资源。

本书作者Chris Smith完美地描述了我最初尝试通过AngularJS文档学习Angular的经历:

“在深入研究了[Angular] API和它的文档之后,我发现我的进展被一个不熟悉的词汇所阻碍,这些词汇包括透射、指令和隔离作用域等术语。当我通读官方文档和教程时,轻松掌握游戏的前景似乎变得模糊不清。”Angular基础-简介章节

角基本知识,你将了解Angular的重要概念:控制器、指令、服务、作用域、依赖注入等等。这本书是交互式的——当你阅读这本书的时候,你会被提示去玩转代码示例——这使它成为一本有趣而吸引人的读物。

这本在线书不会介绍Angular的每一个特性。相反,作者在书中屈服于帕累托原则:“让你使用Angular的大部分功能,同时只让你承担它的一小部分复杂性。”接下来的三个步骤将处理完整性和Angular最佳实践。

步骤3:AngularJS PhoneCat教程App

AngularJS PhoneCat教程App”width=目标:学习如何用Angular的方式构建应用。在学习了上面的两个Angular学习资源之后,你就可以顺利地开发Angular应用了。

就完整性而言,没有什么能比得上官方的Angular文档。在我看来,如果不花时间在官方文档中,你根本无法正确地学习Angular。在PhoneCat教程应用程序,您将创建一个智能手机目录应用程序。

你将学习中级和高级级别的Angular概念,如单元测试、端到端测试、如何组织应用程序文件和目录、模板、模块化应用程序代码的最佳实践等等。慢慢来学习本教程。当你遇到路障时,不要急着向前跳。

(在学习本教程时,我遇到了很多这样的问题。)通过坚持学习本教程的难点部分,你将确保自己真正理解Angular。的作者/sPhoneCat教程应用程序说,你“可以在几个小时内完成整个教程,或者你可能想花一天的时间真正深入研究它。”对我来说,我花了一周的时间才完成,每天花两个小时集中学习。

步骤4:AngularJS开发者指南

AngularJS开发者指南”width=目标:深入理解Angular的基本概念、特性和术语。至此,你应该已经很好地掌握了Angular知识。

现在是时候深入挖掘细节了。官方的AngularJS开发者指南是你的下一站。的AngularJS开发者指南将深入了解Angular的特性和功能的本质。

许多AngularJS新手可能是从这个指南开始的PhoneCat教程),这可能会阻止他们继续学习Angular,因为指南的态度令人生畏。但是在前面的步骤之后,您现在应该更有信心处理本指南。在本指南中,你将学习(或学习)所有你需要了解的关于Angular的东西。

该指南涵盖了提供商、装饰器、插值、安全性、可访问性、在生产环境中运行Angular等内容。我对这个指南的建议跟我给你的建议一样PhoneCat教程:慢慢来,慢慢来。抵制跳过部分的冲动。

步骤5:John Papa的Angular风格指南

John Papa的Angular风格指南”width=目标:学习Angular的最佳实践,例如如何编写、组织和构造代码,使其可维护和可测试。通过阅读我们可以学到很多东西编码风格指南,即使我们最终没有在我们的项目中使用它们。风格指南是关于生成可读的高质量代码的指导方针和最佳实践的权威文档。现在有很多优秀的Angular风格指南,但这一个值得强调,因为它得到了Angular团队的认可。

这个Angular风格指南是由伊戈尔·塔他是Angular团队的领导者,也是谷歌的软件工程师。的Angular风格指南支持广泛的Angular(和JavaScript)最佳实践,例如:

  • 组件的单一职责
  • 使用iife模块化JavaScript的作用域
  • 如何以可读、可测试和可维护的方式编写指令、控制器、模块、服务等
  • 建议的命名约定
  • 如何注释你的代码
  • JS Hint(一个流行的代码质量检查器)的设置可以有效地与Angular一起工作

读完这篇风格指南后,我建议从以下四种做法中选择一种:

  1. 在你的Angular项目中按原样应用这个风格指南。
  2. 调整它(即分叉,然后修改它),使它符合你的个人风格和哲学。
  3. 寻找另一种风格指南,例如角1。x格式指南受人尊敬的开发人员和谷歌开发专家Todd Motto。
  4. 创建你自己的Angular风格指南。

在任何情况下,在开发一个主要的Angular应用程序之前,拥有一套最佳实践是很重要的,它可以帮助指导项目的完成,并促进高质量的代码编写。否则,你的Angular应用很快就会变得一团糟,难以维护。如果你已经完成了路线图,那么恭喜你,因为你现在已经拥有了构建Angular应用所需的知识!

在接下来的章节中,我将讨论一些通用的学习策略,下一代AngularJS (Angular 2),以及更多优秀的Angular学习资源。

有效的学习策略

  • 慢慢来。上面的一些资源会告诉你完成它需要多长时间。不要被这些估算压力所左右。你需要多少时间就花多少时间,因为我们都有不同的学习方法。

    根据我的经验,我几乎总是要花两倍的时间来完成这些任务。

  • 为不受干扰的学习留出时间。要精通某件事刻意练习。刻意练习是一种学习方法,由心理学家K.安德斯·埃里克森在他对优秀人才的研究中提出。

    结果爱立信对刻意练习的研究表明,在学习/训练过程中,最大的表现只能是持续1小时。考虑留出一些一小时的会议每天都要进行高强度、专注的学习,并在一小时的学习中有足够的休息时间。

Angular 2怎么样?

在写这篇文章的时候,角2仍处于测试阶段(发布候选阶段)。本指南用于学习AngularJS 1。我知道很多读到这篇文章的人会想知道他们是否应该等到Angular 2最终完成后再学习Angular。首先,我要明确一点,你现在也可以使用Angular 2,这取决于你的技术采用理念。如果你觉得依赖一个处于(相当成熟的)测试阶段的软件很舒服,那么Angular 2有很多新特性,让它在今天使用起来很有吸引力。

我们正处在一个尴尬的时间点上,Angular 2发展得非常迅速。我的观点是,现在学习AngularJS 1可以让你在现有的项目中自信地使用一个稳定、成熟的Angular版本,当你准备好时,也会让你更容易过渡到Angular 2。

超越:更多Angular学习资源

这里还有其他优秀的Angular资源。

它们会在你的Angular启蒙之旅中证明自己的作用。

  • 角1。x课程由egghead.io在这组高质量的视频课程中,您将了解一些特定的Angular主题,比如在Angular中使用Gulp,以及用Angular进行数据建模。
  • Thinkster AngularJS教程和课程通过Thinkster的一系列优秀的在线教程和课程来学习Angular相关的主题,比如如何将Angular集成到你的Rails项目中。
  • 使用Angular制作查看由亚马逊、PayPal和苹果等大公司和组织创建的Angular应用程序的真实例子。
  • AngularJS API参考通过官方API文档可以找到关于特定Angular特性的详细、明确的信息。
  • DevDocs Angular.js文档这是Angular API文档的可选第三方用户界面。
  • ng-newsletter订阅这篇时事通讯,获取Angular必读内容的通知。
  • AngularJS-Learning在这个由Jeff Cunningham创建和维护的GitHub回购中,可以找到大量的Angular教程、书籍、视频、文章和其他资源。

你还能为那些想学习Angular的人提供哪些学习资源和技巧呢?请在下方留言!

相关内容

雅各Gube是Six Revisions的创始人。他是前端开发人员。与他联系推特

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘!
查看30+职位空缺!