Angular7入门辅助教程——前篇

Angular7入门辅助教程

1、Angular简介

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular
集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建
Web、手机或桌面应用的能力。（复制官网的），它是用typescript（ts）写成的一个前端框架，拥有面向对象的特点（这其实是typescript拥有的！）

2、Angular的中文官网

Angular中文网 <https://www.angular.cn/>

3、一些开发工具的官网

vscode（一款流行的IDE）官网：https://code.visualstudio.com/
<https://code.visualstudio.com/>

Typescript（学习Angular的前提）中文官网：https://www.tslang.cn/docs/home.html
<https://www.tslang.cn/docs/home.html>

4、学习前提

* 拥有一定的Typescript基础，或者javascript的基础也行，但是最好是typescript，如果你不懂Typescript，请先学习
Typescript <https://www.tslang.cn/docs/home.html>
（特别是其中的泛型，函数等），再来学习Angular，会达到事半功倍的效果！
5、适合人群

* 看了Angular官方文档 <https://www.angular.cn/docs>但是有点疑惑的人群，可以来过一遍本教程
* 有Typescript基础，并且希望快速入门Angular的人群，也很适合本教程
6、编写原因以及本教程的特点


从博客的标题就可以看出，本教程是官方教程的辅助教程，因为官方教程很详细，知识点也分的很清楚，短时间很难做到快速了解Angular，所以本教程应运而生，它有两个特点：（1）、
简洁明了，（2）、各Angular核心知识点联系较强
，所以他不仅适合已经看过官方文档（对Angular有一定了解）的人群，还适合处于某种原因，想快速了解Angular的人群

7、参考文档

* Angular中文网 <https://www.angular.cn/docs>
* RxJS官网 <https://rxjs-dev.firebaseapp.com/guide/overview>
8、本教程的目标

这或许是读者所关心的，因为是官网的辅助教程，所以，还是以官网为主！现在你可以先导航到官网的快速入门教程
<https://www.angular.cn/tutorial>
，没错，本教程的目标就是毫无障碍的看懂这篇官方教程，注意，是毫无障碍的看懂哦！！所以，你可以先看看官方的那篇快速入门教程（也就是用Angular写的一个小项目），如果有障碍，那么这篇教程就很适合你！

9、本教程涉及到的Angular的核心知识点

（注意，下面的链接都会导航到官方文档，想做详细了解的可以点进去看下）

主要涉及

* 模块 <https://www.angular.cn/guide/ngmodules>
* 组件和模板 <https://www.angular.cn/guide/displaying-data>
* 依赖注入系统（DI）和服务 <https://www.angular.cn/guide/dependency-injection>
* Observable（可观察对象） <https://rxjs-dev.firebaseapp.com/guide/overview>
次要涉及（主要是官方文档已经足够简洁明了，没必要再写一遍）

* 指令 <https://www.angular.cn/guide/attribute-directives>
* 管道 <https://www.angular.cn/guide/pipes>
* Http服务 <https://www.angular.cn/guide/http>
10、环境准备

下面步骤是必须进行的！！

* Node.js/npm：下载并安装Node.js <https://nodejs.org/zh-cn/>
* TypeScript：参考官方文档安装并使用TypeScript
<https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html>
* Angular：参考官方文档安装并使用Angular CLI <https://www.angular.cn/guide/quickstart>
推荐使用vscode这款编辑器，如果你感兴趣，可以参考下面这篇博客（在这款IDE中使用Angular并不需要额外的配置）

vscode中使用TypeScript，以及vscode一些常用的快捷键
<https://blog.csdn.net/qq_34414916/article/details/85156499>

11、代理

你在使用npm或者vscode的时候，或许会遇到问题，这时候，你可以设置代理，步骤如下：

npm：

(在使用代理的时候，有时候可能需要认证)

npm config set proxy http://"认证账号:密码"@代理的域名:代理的端口/

npm config set https-proxy http://"认证账号:密码"@代理的域名:代理的端口/

npm config set registry http://registry.npmjs.org/

然后使用下面命令查看配置是否正确

npm config list

然后就可以使用npm下载自己需要的包了

vscode：vscode中使用TypeScript，以及vscode一些常用的快捷键
<https://blog.csdn.net/qq_34414916/article/details/85156499>，这篇博客中有设置代理的教程

12、章节结构

* 心法篇（章节的中心，重点中的重点，在开始章节前，你可能看不懂，但是请先过一遍，留个印象就好）
* 详细教程篇（围绕心法篇，通过具体的实例，解释心法篇）
* 问题篇（提出一个与本章节相关的问题，但是可能需要讲很多知识关联起来才能解答，所以你在看完本章节后可能还不知道答案。我会另外写一篇博客给出统一的解答）
注意：如果我觉得官方教程已经足够好了，我会 直接使用官方教程的链接，你可以导航至权威的教程一探究竟

13、章节连接

Angular7入门辅助教程（一）——Angular模块
<https://blog.csdn.net/qq_34414916/article/details/85164742>

Angular7入门辅助教程（二）——组件和模板
<https://blog.csdn.net/qq_34414916/article/details/85167312>

Angular7入门辅助教程（三）——指令
<https://blog.csdn.net/qq_34414916/article/details/85230696>

Angular7入门辅助教程（四）——管道
<https://blog.csdn.net/qq_34414916/article/details/85231668>

Angular7入门辅助教程（五）——Observable（可观察对象）
<https://blog.csdn.net/qq_34414916/article/details/85194098>

Angular7入门辅助教程（六）——Subject（可多播的可观察对象）
<https://blog.csdn.net/qq_34414916/article/details/85201246>

Angular7入门辅助教程（七）——依赖注入系统之服务
<https://blog.csdn.net/qq_34414916/article/details/85212570>

Angular7入门辅助教程（八）——服务提供商
<https://blog.csdn.net/qq_34414916/article/details/85217326>

Angular7入门辅助教程（九）——单例服务
<https://blog.csdn.net/qq_34414916/article/details/85221666>

Angular7入门辅助教程（十）——HttpClient
<https://blog.csdn.net/qq_34414916/article/details/85230432>

Angular7入门辅助教程（十一）——总结
<https://blog.csdn.net/qq_34414916/article/details/85244081>

14、有趣的练习

你可能在此之前，已经学过很多门语言。你可能很精通你所学过的所有语言，但是你也有可能是这样的一种状态：我会用100多种语言写“hello
world”，现在，在你看完这个教程后，我们试着用上前面所学的知识，用Angular这一种语言的不同方式输出“hello world”

练习链接：Angular7入门辅助教程（十一）——总结
<https://blog.csdn.net/qq_34414916/article/details/85244081>

15、讨论区

如果你发现本教程有什么错误的地方、或者疑惑可以联系我，联系方式有如下三种

* 直接在下方留言
* 在我的github上面留言：https://github.com/Learning-Angular/discussion
<https://github.com/Learning-Angular/discussion>
* 通过我的微信公众号后台留言（二维码在文章结尾处）
但是。这三种方式都有一个缺点：我可能不能及时看到哈（你也可以附上你的邮箱，以便你能及时看到答复）

 

微信公众号二维码



 

• « 上一篇：Java程序员月薪三万，需要技术达到什么水平？
• » 下一篇：为什么要进行阿里云云计算助理工程师认证（ACA）