Angular学习第二课--目录结构分析

朴灿烈づ我的快乐病毒、 2023-02-28 15:26 2阅读 0赞

1、目录分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70][]

详情参考： https://www.angular.cn/guide/file-structure

2、组件分析

2.1、app.module.ts 组件分析

定义 AppModule， 这个根模块会告诉 Angular 如何组装该应用。 目前， 它只声明了  
AppComponent。 稍后它还会声明更多组件。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1][]

2.2、自定义组件分析

使用命令详解，见：[https://cli.angular.io/][https_cli.angular.io]

在components新建立的目录下，创建一个header组件

ng g component components/header

header组件内容详解：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2][]

在html页面中，使用该header组件时，可以使用<app-header></app-header>

4、简单的数据绑定

Angular 中使用\{ \{\}\}绑定业务逻辑里面定义的数据

<h1>
    {
       {title}}
    </h1>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70]: /images/20230209/9af2b334f7e94688b6b7344fce8293ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1]: /images/20230209/5fd95d208e7e48b5a5f1f3517b7e18f7.png
[https_cli.angular.io]: https://cli.angular.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200721213357847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70