图片来自code.likeagirl.io/adventures-…
目的
虽然我知道angular是最流行的TS框架工作之一，但我还没有接触过（即使我到目前为止已经学会了react和vue。）是时候学习angular了，我将与你分享Angular的情况，以及如何使用它。
什么是Angular？
正如我已经提到的Angular是由google提供的最流行的TS框架之一，从2016年开始。其实angular是第二版，第一版的名字是angular JS，也是由google开发的，2012年发布。angular JS有非常创新的功能，集成了MVC模型（模型、视图、控制器），还有很多无需库的内置功能。然而，基本上angular是为设计师而不是开发者创建的，所以如果它被用在大项目中，就会出现性能和构建时间问题。因此，谷歌决定做一些破坏性的改变，包括将MVC模型改为基于组件的模型，以解决性能问题，名字也改为angular（不是JS）。AngularJS不再支持了（这个支持期限在2022年1月结束），如果你是angular的初学者，你需要学习angular而不是angular JS。那么，什么是angular的优点和缺点？
优点和缺点
优点
- 有很多内置的功能
如果你想使用react或vue的路由，你需要安装一些库，如react-router-dom或vue-router。然而，angular有内置的包来实现路由功能，所以你不需要安装它。有人可能会说这不是一个大问题，但如果你是一个大项目，这可能是一个大问题，因为你需要和同事一起安装一个完全相同的包来管理版本。如果你只有几个库，那还可以，但超过20个或更多的库，如何管理？
- 标准的TypeScript特性。
这是与angular JS、react、vue不同的特性之一。尽管你可以在react和vue中选择TypeScript作为选项，但这并不是强制性的。然而，Angular有一个 "标准 "的TypeScript功能，不是一个选项。所以，如果你想使用Angular，你也需要学习TypeScript。这是一个有争议的话题，但我个人同意谷歌的观点，因为这个库很适合一个相对较大的项目，我已经说过了。TypeScript也很适合大项目，因为这个alt JS避免了添加Type的严重错误，并促进了团队的发展。
- 生产力
正如我已经提到的，Angular有很多好的内置功能。例如，如果你想创建一个组件，你可以使用angular cli的命令行来创建（如 "ng g "）。这是一种后端Fullstack框架，如Laravel。所以，如果你熟悉Angular的方式，你会有很好的生产力来创建一些应用程序或管理你的项目。
缺点
- 学习曲线
这种Angular方式给了我们很大的生产力，但你需要掌握Angular的独特方式。你不需要记住整个语法，但需要掌握核心概念，如数据绑定、指令等。这就是为什么这个库的学习曲线比其他库如react或vue更陡峭。如果你已经熟悉了react或vue，那就不会太难。但如果你是一个新来的，这可能是一个严重的问题。
- 标准的TypeScript特性。
虽然这完全是优势或劣势，但TypeScript功能可能是减分项，因为与JavaScript相比，它需要时间来学习。对于管理相对较大的项目来说，这是一个非常好的功能，但对于刚刚开始学习JavaScript的初学者来说，这并不适合。
- 可能会有超规格的问题。
正如我已经提到的，这个库有很多有用的内置包，但对于一个小项目来说，这可能是超规格的，因为有很多未使用的功能，而且这不是一个最优雅的方式。所以一般来说，Angular很适合大项目，即使你可以在一个小项目中使用这个库。
关于Angular的介绍就到此为止，让我们看看这个项目的例子。
例子(计数器应用)
操作步骤
- 设置你的环境
npm install -g @angular/cli
如果你是mac用户，你可能需要在上述命令前sudo并输入密码来处理，因为这是一个全局安装。
如果你是windows用户，你需要处理一个全局安装的问题。如果你有问题，请参考官方文档（我放在参考部分）。
苹果
sudo npm install -g @angular/cli
Windows
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
使用上面的命令（npm install -g @angular/cli）来安装angular cli。
2.创建你的工作空间和应用程序。你需要回答一些问题（这个答案由你决定）。回答完以下问题后，你的应用程序就成功安装了你的工作空间。
创建一个新的文件夹
ng new angular-counter(This name is up to you)
问题
第一个
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and
第二
? Would you like to share anonymous usage data about this project with the Angular Team at
第三
Would you like to add Angular routing? (y/N)
第四(你需要选择)
Which stylesheet format would you like to use? (Use arrow keys)
2.移动到你的工作区，并检查你的文件（检查文件是可选的）。
移动到你的工作空间
cd angular-counter(this is your app name)
下面是这个文件夹结构。如果你熟悉任何其他的JS框架工作，如react, vue。这也是类似的，但略有不同，而且文件更多。例如，这个文件夹有三个不同的tsconfig文件，环境文件，以及polyfills。与react或vue相比，这似乎是更复杂和详细的功能。
.
3.使用下面的命令运行你的应用程序，在 "localhost: 4200 "看到以下屏幕
np serve --open
好了，让我们来创建计数器应用程序。
4.修改你的 "app.component.ts"，如下所示。基本上，你需要在这里写JS代码作为类组件。你可以看到在@Component里面，你需要注册模板网址和样式（这是默认的，但如果你想创建另一个，你需要创建新的。）
5.修改你的 "app.component.html"，如下所示。注意，你可以通过使用{{}}注入你的状态。你需要用（）来绑定点击。造型是可选的，但你可以像纯css那样做。在我的例子中，我写了一些基本的样式，如下所示。
medium.com/media/a01a6…medium.com/media/77f22…
6.完成了!下面是我的屏幕，这完全是在工作。
总结
Angular是最流行的JS框架之一，它有很多有用的内置包。如果你已经熟悉JS和TS，或者你想创建相对较大的应用程序，有很多功能，这个库对你很有帮助。在我看来，与选择其他JS框架的公司相比，使用angular的公司旨在编写更多的结构、优雅、可读的代码，因为angular不太流行，有时可能很难找到合适的解决方案，因为要熟悉TypeScript和内置功能的障碍。然而，这个库有一个很好的功能，可以很容易地进行维护，所以使用它是一个不错的选择。
参考资料
官方文档（Angular）：https://angular.io/guide/setup-local
官方文档(AngularJS):angularjs.org/
Angular和AngularJS的区别:www.geeksforgeeks.org/difference-…
AngularJS vs. Angular 2 vs. Angular 4: 关键区别:www.simplilearn.com/angularjs-v…
Angular中的冒险:code.likeagirl.io/adventures-…
三大Javascriptフレームワーク「Angular, React, Vuejs」について:it-kyujin.jp/article/det…
【初心者必见】Angularとは？いまさら聞けない基礎を学ぼう:www.sejuku.net/blog/9019
谢谢你的阅读！!
如何使用Angular最初发表在Dev Genius的Medium上，在那里人们通过强调和回应这个故事来继续对话。
