我前几天完成了Udemy的Angular课程「初学者指南：实践单页应用程序（SPA）构建」。

考虑到日本语中可用的Angular视频教程较少，那些希望通过视频学习Angular的人来说，这应该是首选项之一。

关于这门课程，截止到2019年5月18日，由于其适用版本为Angular v5，因此存在一些稍显陈旧的信息。因此，我想记录与当前版本（Angular v7，Angular CLI v7）进行比较的内容。

如果你刚开始学习博客编程，可能会遇到一些稍微有所不同的情况，不知道该怎么办才好。如果这对那些人有所帮助，那就太好了。

版本

「Angular入门实践：构建单页面应用程序（SPA）的初级指南」（以下简称Angular講座）。

Angular (5.0.2)
Angular CLI (1.5.0)
Node.js (8.8.1)

我

Angular (7.2.15)
Angular CLI (7.3.9)
Node.js (10.15.0)

角度cli

现在使用ng new时，会被要求设置路由和CSS格式。

$ng new <ProjectName>
Would you like to add Angular routing? (y/N)
Which stylesheet format would you like to use? 
  CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  

执行ne new <项目名称>命令时，可以预先选择是否使用Angular路由器和CSS格式，以创建新项目。

路由器

首先，路由默认情况下是关闭的。如果将其设为是，@angular/router将会被预先设置。

我最初也觉得如果默认情况下包含了路由器就好了，但例如使用OnsenUI或Ionic等UI库时，它们都有各自独立的路由器。因此，即使需要路由功能，也有可能不使用@angular/router。

CSS格式的种类

在CSS格式中，有五种可供选择的类型，分别是CSS、SCSS、Sass、Less和Stylus。

在Angular讲座中，由于CSS基本上是复制粘贴，所以在进程中没有特别大的优势，但是如果想要自定义的话，使用SCSS会更加方便。

设定文件的名称已经改变。

.angular-cli.json 已更改为 angular.json。

在创建Guard对象时，开始被要求同时生成什么方法（接口）。

$ng generate <Name>

? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ CanActivate
 ◯ CanActivateChild
 ◯ CanLoad

当你从CanActive、CanActiveChild、CanDeactive这三个选项中选择一个或多个时，它会为你预先创建选择方法的模板。

启动

在安装Bootstrap时，使用Angular教程中的命令不起作用。经过调查，采用了这个网站上的方法成功地应用了。

尝试使用Angular6和Bootstrap4。

请务必查看此处以获取更详细的信息。他们已经非常清晰地整理了内容。

我只想简要总结一下与Angular课程的差异。

Bootstrap的安装

这个问题是在Angular讲座上使用了bootstrap@next –save，但是尝试了这种方法却没成功。

npm install --save bootstrap && npm install --save jquery popper.js

安装了Bootstrap和jQuery之后，成功地将其应用到了这里。

将bootstrap的CSS文件设置分别写在用于构建（build）和测试（test）的两个位置。

请注意，Bootstrap的CSS文件的设置位置增加到两个地方了。默认的根目录设置已经被更改。在Angular课程中，是使用”src”。而在版本7中则使用了空字符串。

Firestore

更改软件包名称

Firebase的软件包名称已经从angularfire2更改为@angular/fire。

可选择的区域正在增加。

在进行Firebase项目的初始设置时，您可以选择区域。尽管默认设置没有问题，但考虑到通信速度，建议将区域更改为asia-northeast，即东京区域。

其他细微的用户界面

考虑到Firebase经常进行版本升级，因此细微的用户界面差异可能会相当大，但基本上只是外观有所变化，我认为这应该没问题。

RxJS（版本6）

在进行Angular讲座时，我特别遇到了这个问题。RxJS v6中Observable的使用方法发生了许多变化。我特别参考了这篇文章来了解RxJS的变更。

如何将RxJS v5打包成较小的大小。通过更改import语句的写法可以改变大小（也提供v6的写法介绍）。

请务必查看文件中对于import的写法所造成的容量差异以及每个版本中细微规格的变化，因为这些内容都被清晰地总结在一起。

更改导入方法

在使用操作符时，不仅需要导入Observable，还需要单独导入操作符本身。
例如，如果想要使用map操作符，需要写成import {map} from ‘rxjs/operators’。

管道式

这也是与Angular教程的一个重大变化。在Angular教程中，我们可以像使用方法链一样使用诸如map等操作符，但是从RxJS(v6)开始，改为使用pipe表达式。

//Observable型に直接オペレーター
return this.afAuth.authState.map(user => {処理});

//pipe()の中にオペレーター
return this.afAuth.authState.pipe(map(user => {処理}));

因为我最初是从Ruby开始学习的，所以更习惯于使用方法链式编程方式，但使用管道式编程可能会更有整体性。

总结

我认为Angular所需的学习成本较高，因此初学者通常具备其他编程语言的经验（有编程经验的人）。

虽然上述的差异很小，但对于完全的初学者来说，遇到教科书上没有介绍的情况是非常恐怖的。如果能对这些人提供帮助，我会感到幸运。

对于Angular学习成本高的不良声誉，我本来持有偏见，但当我真的去尝试时，发现它并没有跟其他框架有很大的差别，反而让我对TypeScript的可靠性和其全能性所带来的技术选择成本的降低感到欣赏。

Udemy的Angular课程的评价

我觉得用文字更容易处理，这里确实有很多方便之处。你可以按照自己的节奏进行，也容易回顾。此外，还有Angular官方教程和在Qiita上的入门文章等等。

Angular講座中令我印象深刻的是讲师意外地犯错的地方 🙂

当只看到文本时，只有正确结果留存，但是如果能看到编码过程的视频，将能够了解容易出现拼写错误的地方、常常遗忘的导入语句、和导致小错误的原因等等，对我来说是非常有益的。