視頻地址：
主要內容：
試看課程主要為一個多小時的視頻，主講人用飽含印度口音的英文很詳盡地講述了一個Angular項目的文件結構、組成原理等內容，會使觀看者對Angular項目結構有十分深刻的了解。非常符合“beginners”這個主題設定
材料評價：
評價指數：??????????
推薦指數：??????????
個人學習筆記：
我認為這個學習視頻最具有概括性的是最后出現的問題總結，截圖如下：
這既是課堂提問，也是對整個視頻重點知識點的總結?？梢灾苯痈鶕@張圖提到的點去視頻里找答案，也可以一邊看一遍做記錄，最后通過這張圖來驗證下自己還記得多少。
要說圖里面的知識點對實際項目有什么用？我想“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中的服務?？梢哉f，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）
-
webpack發布：
圖 13 -
ng builld之后生成的html文件及作用：
圖 14
圖 15
