Angular建立专案(一)(Day16)

今日我们来利用Angular CLI建立一个新的专案

来打开VsCode内建的terminal
https://ithelp.ithome.com.tw/upload/images/20211001/20138857caVIy6lel2.png

帮我移动到欲放置专案的路径


cd {专案路径}

Angular CLI的指令非常简单易懂,要新建专案只要下一个指令


ng new StockAngular #新建专案

Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict (y/N) 

#询问是否对型别进行严格检查及捆绑导入,可以帮助你更容易发现错误

y

#会为你定义一个基本的路由(也就是导页)
Would you like to add Angular routing ? (y/N)

y

Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ https://stylus-lang.com                                        ]

这边选择CSS 直接按Enter就好

#专案建立後会出现这个
Packages installed successfully.
    Successfully initialized git.

为什麽要询问是否对型别进行严格检查及捆绑导入呢?

此为在Angular 10.0 新增专案时会出现的预设选项时

  • Enables strict mode in TypeScript : 使用TypeScript解决JS型别不明的问题

  • Turns template type checking to Strict : 使型别检查变为严谨

  • Default bundle budgets have been reduced by ~75% : 专案打包时容量能减少75%以上

  • Configures linting rules to [prevent declarations of type any] :找出编译上、语法上潜在的问题(https://palantir.github.io/tslint/rules/no-any/)

  • Configures your app as side-effect free to enable more advanced tree-shaking :让专案可以保持无副作用状态&tree-shaking

side-effect free (无副作用状态) :

A method of an object can be designed as a Side-Effect-Free Function [Evans]. A function is an operation of an object that produces output but without modifying its own state. Since no modification occurs when executing a specific operation, that operation is said to be side-effect free.

意思是不会让函数可以对主函数产生除了输出值外附加的修改(例如修改主函数的全域变数,降低程序的耦合性)

tree-shaking:

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination

消除无用的js代码

成功 新建一个专案後,移动进入资料夹内


cd StockAngular  

#启动专案并开启浏览器

ng serve --open 

Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. (y/N)

#google询问是否可以蒐集数据 这个选Y/N都可以

N

#接着Angular就会自动帮我compile和压缩专案(为了让专案所占的容量更小)

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names  |      Size
styles.css, styles.js | styles | 348.62 kB

4 unchanged chunks

Build at: 2021-10-01T12:30:22.024Z - Hash: 81b350b69825886e0aaa - Time: 314ms

√ Compiled successfully.

会出现这个画面

https://ithelp.ithome.com.tw/upload/images/20211001/20138857Me0IVM46Il.png

此时我们打开资料夹可以看到CLI帮我们建好的格式

https://ithelp.ithome.com.tw/upload/images/20211001/20138857ldn4msu4xN.png

那我们明天就来就介绍这些档案的功能吧~!


<<:  Day 16 偷偷摸鱼放个waitFor

>>:  DAY16 Run application in real life

[Day 11] 来自未来的资料 - 数据泄露(Data leakage)

一、数据泄露(Data leakage) 在男性前列腺癌数据中,有个feature叫PROSSUG,...

Day 5 : HTML - 网页排版超强神器,CSS Flex到底是什麽?

这篇想和大家聊聊CSS Flex到底是什麽东西 它是个超好用的排版工具,也是它拯救了我 (详情可看D...

【课程推荐】2021/5/15~5/16 Agile敏捷专案管理实务班

课程目标 本课程将简介两种常见敏捷方法 (Scrum 与 Kanban) 如何在专案中要如何处理问题...

想要爬个资料也困难重重

这边先说一下,关於上一篇的程序码好像有些问题,我这次找了其他资料练习,先用了另一组程序抓取,确认抓取...

欢迎加入[追求高效能的CISSP]脸书中文群组!

追求高效能的CISSP! CISSP不是黄金证照,它只是资安专业人员的入门砖。建立这个基本的专业要求...