Angular 6 tutorial for beginners笔记

视频地址：

Angular 6 tutorial for beginners

主要内容：

试看课程主要为一个多小时的视频，主讲人用饱含印度口音的英文很详尽地讲述了一个Angular项目的文件结构、组成原理等内容，会使观看者对Angular项目结构有十分深刻的了解。非常符合“beginners”这个主题设定

材料评价：

评价指数：
推荐指数：

个人学习笔记：

我认为这个学习视频最具有概括性的是最后出现的问题总结，截图如下：

图 1

这既是课堂提问，也是对整个视频重点知识点的总结。可以直接根据这张图提到的点去视频里找答案，也可以一边看一遍做记录，最后通过这张图来验证下自己还记得多少。
要说图里面的知识点对实际项目有什么用？我想“beginners”的基础还是需要打得劳一些吧。最起码需要知道组成项目的每一个模块都是什么，都在干些什么。
以下是我对图中问题的一些简略的回答。

1. node帮助我们快速搭建前端代码可以运行的后端环境，使用的是v8 engine

2. npm是node的包安装管理工具，使用 npm install命令来安装包依赖

3. node modules

4. angualr cli帮助开发者快速搭建项目并安装好了相关依赖，其文件夹结构是：
   图 2
   
   

   其中，e2e是测试文件夹，editorconfig.json包含了IDE的相关设置，angular.json 包含了angualr的相关设置，package.json包含了node的相关设置，tsconfig.json包含了ts的相关设置，tslint.json包含了代码验证相关信息

5. 全局安装node依赖包

6. 使用cli创建app的过程

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve

7. serve表示开启node服务器，build表示构建项目

8. vscode是IDE

9. vscode集成terminal可以快速定位到项目文件位置
   图 3

10. src：项目资源文件，存放项目主要的功能代码；dist：构建成功后的项目文件，经过打包工具的构建和编辑；e2e：for testing purpose\npm run test时需要用到的文件

11. package.json定义了node的相关配置，同时对项目的依赖文件进行了展示；tsconfig.json文件是对ts的配置文件，其中规定了本项目中ts的显示规则

12. tslint是辅助开发者提高代码质量的工具，可以帮助开发者规范其代码。tslint.json是其配置文件

13. angular.json的重要性：该文件是对angular项目的定义文件，对本项目的angualr代码进行了配置

14. angular项目中，在哪里定义源代码路径？
    图 4
    
    

    该属性定义了source code的文件位置

15. angular.json文件中architect标签的含义是什么？tell us which kind of builder for which kind of command. 比如，图中的几个命令所用的的builder和相对应的选项：
    图 5

16. components：组件，每个项目功能的组成部分，angualr的核心；modules：组件的集合，a group of components

17. interpolations指的是：外部引入到项目中文件，decorators指的是：装饰器，即通过@引入到component或module中的服务。可以说，interpolations是用来引入文件的，decorators是用来使用文件的

18. templateurl connects the components and view

19. moduels可以简单的理解为：a group of components 即：将一组功能组件进行集中管理，统一为一个module。可以在main.ts中进行引用

20. declaration in modules helps us define components

21. bootstrap in modules可以用来定义初始渲染的component

22. main.ts

23. selector标签在component文件中出现，表示组件需要插入到的元素名称

24. polyfills文件如何没被使用会发生什么？项目兼容性会产生问题

25. webpack是项目打包工具，帮助将ts文件打包为js文件，同时将整个项目编译为一个dist文件，用于前端发布

26. vendor.js和runtime.js中都展示了什么代码？runtime.js: webpack的运行代码；vendor.js：项目资源代码，包含开发的components、modules等

以下，是我对视频中提到的一些重点内容的笔记，有些重点部分的逻辑结构就使用原视频的截图，也有一些我本地搭建项目的截图：

1. angular 以组件为核心

2. angular cli生成的文件结构：

   
   
   图 6
   
   

   其中，angular.json负责管理angualr的配置，package.json负责管理node的配置，tsconfig.json负责管理typescript的配置
   tsc 命令可以将ts文件编译成js文件

3. src:

   
   
   图 7
   
   

   angular通过将html和js对象绑定的方式来渲染数据，是mvw framework，angular做的事binding code的事情

   
   
   图8

4. 在angular项目中，binding code存储在component模块中，它负责将view和model连接起来，有binding的作用

   
   
   图 9

5. module是对多个components的统称 (a group of components)

   
   
   图 10

6. component中的内容通过 @ 装饰符同UI进行绑定。selector对象表示需要插入组件的根元素，这个值在index.html文件中进行定义

   
   
   图 11

7. module中，declarations用来形容项目都包含哪些组件，bootstrap用来规定初始组件（from all of the components in declarations, which is start one）

图 12

8. webpack发布：

   
   
   图 13

9. ng builld之后生成的html文件及作用：

   
   
   图 14
   
   
   图 15