发表于: 2021-05-20 22:05:18

1 1835


今天完成的事情:定义了三个组件页面,看了angular模块,组件;感觉不是太懂;


明天计划的事情:angular路由实现的页面跳转;任务六


遇到的问题:使用angular写代码还没头绪;没搞懂


收获:

创建组件:ng generate component MyComponent(组件名),可以简写成ng g c MyComponent

执行此命令后,会自动生成一个组件的文件,而且 app.module.ts 文件中也会自动引入新建的组件

模块: 

NgModule 模块是Angular种一个重要的点,因为Angular的基本构造块就是NgModule。NgModule 会把相关的代码收集到一些功能集中,形成功能单元。在使用Angular CL 命令新建一个项目的时候,会给我们生成一个根模块,命名为 AppModule,根模块有一个根组件AppComponent,引导这个根模块就可以启动应用。Angular 应用是模块化的,我们在开发中会根据其功能 作用 以及其特性,建立大大小小各种模块,从而构建其成为一个应用程序,任何模块都能包含任意数量的其它组件。

Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供者或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。

每个 Angular 项目中都有一个根模块,通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。


组件:

每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类,其中包含应用的数据和逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示的视图。

@Component()  装饰器表明紧随它的那个类是一个组件,并提供模板和该组件专属的元数据。


组件和模板共同定义了 Angular 的视图。

组件类上的装饰器为其添加了元数据,其中包括指向相关模板的指针。
组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。


路由配置

在 app-routing.module.ts 文件中配置路由,实现组件的切换,页面的跳转

引入组件

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { LoongComponent } from './loong/loong.component';

可以从 app.module.ts 文件里直接复制过来,毕竟创建组件时就自动引入到 app.module.ts 里了,又在同一目录下,引入的路径也是一样的,可以直接拿过来用

配置路由还没搞出来。。



返回列表 返回列表
评论

    分享到