视频地址：
主要内容：
试看课程主要为一个多小时的视频，主讲人用饱含印度口音的英文很详尽地讲述了一个Angular项目的文件结构、组成原理等内容，会使观看者对Angular项目结构有十分深刻的了解。非常符合“beginners”这个主题设定
材料评价：
评价指数：🌟🌟🌟🌟🌟
推荐指数：🌟🌟🌟🌟🌟
个人学习笔记：
我认为这个学习视频最具有概括性的是最后出现的问题总结，截图如下：
图 1
这既是课堂提问，也是对整个视频重点知识点的总结。可以直接根据这张图提到的点去视频里找答案，也可以一边看一遍做记录，最后通过这张图来验证下自己还记得多少。
要说图里面的知识点对实际项目有什么用？我想“beginners”的基础还是需要打得劳一些吧。最起码需要知道组成项目的每一个模块都是什么，都在干些什么。
以下是我对图中问题的一些简略的回答。
- node帮助我们快速搭建前端代码可以运行的后端环境，使用的是v8 engine
- npm是node的包安装管理工具，使用 npm install命令来安装包依赖
- node modules
- angualr cli帮助开发者快速搭建项目并安装好了相关依赖，其文件夹结构是：
图 2
其中，e2e是测试文件夹，editorconfig.json包含了IDE的相关设置，angular.json 包含了angualr的相关设置，package.json包含了node的相关设置，tsconfig.json包含了ts的相关设置，tslint.json包含了代码验证相关信息
- 全局安装node依赖包
- 使用cli创建app的过程
npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve
- serve表示开启node服务器，build表示构建项目
- vscode是IDE
- vscode集成terminal可以快速定位到项目文件位置
图 3
- src：项目资源文件，存放项目主要的功能代码；dist：构建成功后的项目文件，经过打包工具的构建和编辑；e2e：for testing purpose\npm run test时需要用到的文件
- package.json定义了node的相关配置，同时对项目的依赖文件进行了展示；tsconfig.json文件是对ts的配置文件，其中规定了本项目中ts的显示规则
- tslint是辅助开发者提高代码质量的工具，可以帮助开发者规范其代码。tslint.json是其配置文件
- angular.json的重要性：该文件是对angular项目的定义文件，对本项目的angualr代码进行了配置
- angular项目中，在哪里定义源代码路径？
图 4
该属性定义了source code的文件位置
- angular.json文件中architect标签的含义是什么？tell us which kind of builder for which kind of command. 比如，图中的几个命令所用的的builder和相对应的选项：
图 5
- components：组件，每个项目功能的组成部分，angualr的核心；modules：组件的集合，a group of components
- interpolations指的是：外部引入到项目中文件，decorators指的是：装饰器，即通过@引入到component或module中的服务。可以说，interpolations是用来引入文件的，decorators是用来使用文件的
- templateurl connects the components and view
- moduels可以简单的理解为：a group of components 即：将一组功能组件进行集中管理，统一为一个module。可以在main.ts中进行引用
- declaration in modules helps us define components
- bootstrap in modules可以用来定义初始渲染的component
- main.ts
- selector标签在component文件中出现，表示组件需要插入到的元素名称
- polyfills文件如何没被使用会发生什么？项目兼容性会产生问题
- webpack是项目打包工具，帮助将ts文件打包为js文件，同时将整个项目编译为一个dist文件，用于前端发布
- vendor.js和runtime.js中都展示了什么代码？runtime.js: webpack的运行代码；vendor.js：项目资源代码，包含开发的components、modules等
以下，是我对视频中提到的一些重点内容的笔记，有些重点部分的逻辑结构就使用原视频的截图，也有一些我本地搭建项目的截图：
-
angular 以组件为核心
-
angular cli生成的文件结构：
图 6
其中，angular.json负责管理angualr的配置，package.json负责管理node的配置，tsconfig.json负责管理typescript的配置
tsc 命令可以将ts文件编译成js文件 -
src:
图 7
angular通过将html和js对象绑定的方式来渲染数据，是mvw framework，angular做的事binding code的事情
图8
-
在angular项目中，binding code存储在component模块中，它负责将view和model连接起来，有binding的作用
图 9
-
module是对多个components的统称 (a group of components)
图 10
-
component中的内容通过 @ 装饰符同UI进行绑定。selector对象表示需要插入组件的根元素，这个值在index.html文件中进行定义
图 11
- module中，declarations用来形容项目都包含哪些组件，bootstrap用来规定初始组件（from all of the components in declarations, which is start one）
图 12
-
webpack发布：
图 13
-
ng builld之后生成的html文件及作用：
图 14
图 15
网友评论