Angular7入门辅助教程——前篇

Angular7入门辅助教程

1、Angular简介

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

2、Angular的中文官网

Angular中文网

3、一些开发工具的官网

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

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

4、学习前提

• 拥有一定的Typescript基础，或者javascript的基础也行，但是最好是typescript，如果你不懂Typescript，请先学习Typescript（特别是其中的泛型，函数等），再来学习Angular，会达到事半功倍的效果！

5、适合人群

• 看了Angular官方文档但是有点疑惑的人群，可以来过一遍本教程
• 有Typescript基础，并且希望快速入门Angular的人群，也很适合本教程

6、编写原因以及本教程的特点

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

7、参考文档

• Angular中文网
• RxJS官网

8、本教程的目标

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

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

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

主要涉及

• 模块
• 组件和模板
• 依赖注入系统（DI）和服务
• Observable（可观察对象）

次要涉及（主要是官方文档已经足够简洁明了，没必要再写一遍）

• 指令
• 管道
• Http服务

10、环境准备

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

• Node.js/npm：下载并安装Node.js
• TypeScript：参考官方文档安装并使用TypeScript
• Angular：参考官方文档安装并使用Angular CLI

推荐使用vscode这款编辑器，如果你感兴趣，可以参考下面这篇博客（在这款IDE中使用Angular并不需要额外的配置）

vscode中使用TypeScript，以及vscode一些常用的快捷键

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一些常用的快捷键，这篇博客中有设置代理的教程

12、章节结构

1. 心法篇（章节的中心，重点中的重点，在开始章节前，你可能看不懂，但是请先过一遍，留个印象就好）
2. 详细教程篇（围绕心法篇，通过具体的实例，解释心法篇）
3. 问题篇（提出一个与本章节相关的问题，但是可能需要讲很多知识关联起来才能解答，所以你在看完本章节后可能还不知道答案。我会另外写一篇博客给出统一的解答）

注意：如果我觉得官方教程已经足够好了，我会 直接使用官方教程的链接，你可以导航至权威的教程一探究竟

13、章节连接

Angular7入门辅助教程（一）——Angular模块

Angular7入门辅助教程（二）——组件和模板

Angular7入门辅助教程（三）——指令

Angular7入门辅助教程（四）——管道

Angular7入门辅助教程（五）——Observable（可观察对象）

Angular7入门辅助教程（六）——Subject（可多播的可观察对象）

Angular7入门辅助教程（七）——依赖注入系统之服务

Angular7入门辅助教程（八）——服务提供商

Angular7入门辅助教程（九）——单例服务

Angular7入门辅助教程（十）——HttpClient

Angular7入门辅助教程（十一）——总结

14、有趣的练习

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

练习链接：Angular7入门辅助教程（十一）——总结

15、讨论区

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

1. 直接在下方留言
2. 在我的github上面留言：https://github.com/Learning-Angular/discussion
3. 通过我的微信公众号后台留言（二维码在文章结尾处）

但是。这三种方式都有一个缺点：我可能不能及时看到哈（你也可以附上你的邮箱，以便你能及时看到答复）

 

微信公众号二维码