Angular start 01

   Author: Gentleman.Hu
   Create Time: 2020-11-04 10:32:18
   Modified by: Gentleman.Hu
   Modified time: 2020-11-05 15:51:43
   Email: [e-mail]
   Home: https://crushing.xyz
   Description:

Angular Start

目录结构

详细(ts)doc

官方文档

app.component.spec.ts，[单元测试](typescript - What are the "spec.ts" files generated by Angular CLI for? - Stack Overflow)

• ① Root component，根组件

  • 
  • ① 对应html中的 DOM中的selector位置，被解释翻译点

  • ② 对应此组件的HTML模板

  • ③ 对应此组件的css样式

  • ④ 此组件类的成员和方法函数等

• ② Main module，主模块

  • app.module.ts，应用具体定义配置模块，定义了所有相关组件和依赖等

  • 
  • @NgModule，这个ts注解标识是Angular的module类

  • declarations ，标识哪些组件可以再本应用使用

  • imports，引入其他的module，提供函数使用

  • providers，injector，提供运行时的注入 [doc](Angular)

  • bootstrap，本应用的入口组件

• ③ Root HTML，根HTML页

• ④ Entry point，入口

  • 
  • 启动应用

• ⑤ Angular CLI config，cli配置

declarations

The declarations block defines all the components that are allowed to be used in the scope of the HTML within this module. Any component that you create must be declared before it can be used.

imports

You will not create each and every functionality used in the application, and the imports array allows you to import other Angular application and library modules and thus leverage the components, services, and other capabilities that have already been created in those modules.

bootstrap

The bootstrap array defines the component that acts as the entry point to your application. If the main component is not added here, your application will not kick-start, as Angular will not know what elements to look for in your index.html.

创建一个组件

UnderstandingCompontents

'$'符号作用

• ng generate component path/name

• 以上命令利用cli工具创建component

• 
• cli将自动在app.module.ts中添加声明和依赖

• 
• 可以看到自动生成的component，selector正是对应html中的selector，对应解析翻译。

• ngOnInit()此方法是实现OnInit接口的方法，设置了Hook，当此Component初始化时候触发

• 里边填写相应的初始化变量，类似Java构造方法