手把手教你使用Angular之模块与组件

最新推荐文章于 2025-02-20 22:49:44 发布

原创

最新推荐文章于 2025-02-20 22:49:44 发布 · 4.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Angular5 #Angular模块 #Angular组件

本文手把手教你理解Angular中的模块和组件。模块是Angular的最大单元，包含声明、导出、导入和服务等内容，允许分模块组织功能。组件是可复用的视图单元，通过@Component装饰器定义，具有选择器、模板和样式等属性。通过模块和组件的组合，可以构建复杂的应用系统。

转自：轻样知生 - 手把手教你使用Angular之模块与组件 - Tylili

一、模块

虽然Angular是一款前端框架，但在使用Typescript作为开发语言的同时，也引入了面向对象的开发方式。熟悉Java开发的同学肯定知道依赖注入的概念，幸运的是，Angular的模块化也引用了这一设计模式。模块是Angular中最大的单元，任何应用都应该有一个根模块，同时也可拥有多个模块。Angular中，通过@NgModule装饰器定义模块，示例如下：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent