0

0

浅析Angular中什么是ngModule

青灯夜游

青灯夜游

发布时间:2021-09-16 10:21:57

|

2682人浏览过

|

来源于csdn

转载

什么是ngmodule?本篇文章带给大家简单了解一下angular语法,介绍一下angular中的ngmodule,希望对大家有所帮助!

浅析Angular中什么是ngModule

作为Angular10教程,在我的理解中,angular相较于VUE,它的模块化做得更好,这样使代码结构显得更清晰。所以本节,我们将简单介绍下angular语法,对ngModule的理解。【相关教程推荐:《angular教程》】

首先,什么是angular module(ngModule)?

我的理解:其实就是被@NgModule所装饰的普通的类,没有什么特别的。

那么问题来了,什么又是@NgModule呢?

先来看看src/app/app.module.ts里默认代码:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// @NgModule(元数据)
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } // 模块名AppModule

@NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。(元数据不止上面这几个配置项,但我们先说这几个)

declarations数组

这个单词本身的意思是“公告、宣告”,在这里是本模块的依赖项。包括模块可能会依赖的一些组件指令管道。引入规则:

  • 要使用他们,就必须先引入。 \
  • 一个组件、指令或管道只能被一个模块引入(声明)
  • 在declarations中的组件默认只能在当前模块中使用,要想让其他模块使用,必须exports出去

imports数组

imports数组只会出现在@NgModule装饰器中,一个模块想要正常工作,除了本身的依赖项(declarations),还可能需要其他模块导出的依赖项。 只要是angular module,都可以导入imports数组中,比如自定义的模块(如:AppRoutingModule),第三方或者ng内置的(@angular/**)都可以

providers数组

提供一系列服务

bootstrap数组

数组中的每个组件,都作为组件树的根(根组件),引用在启动的过程中,会将这里面的组件逐个解析并插入到浏览器的DOM中。

但是通常情况下,里面只会有一个AppComponent

用Apache Spark进行大数据处理
用Apache Spark进行大数据处理

本文档主要讲述的是用Apache Spark进行大数据处理——第一部分:入门介绍;Apache Spark是一个围绕速度、易用性和复杂分析构建的大数据处理框架。最初在2009年由加州大学伯克利分校的AMPLab开发,并于2010年成为Apache的开源项目之一。 在这个Apache Spark文章系列的第一部分中,我们将了解到什么是Spark,它与典型的MapReduce解决方案的比较以及它如何为大数据处理提供了一套完整的工具。希望本文档会给有需要的朋友带来帮助;感

下载

那angular组件又是什么样呢?

先看app组件,src/app/app.component.ts的默认代码:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {// 组件名AppComponent
  title = 'hero';
}

可以看出,还是常规操作:引入–>配置–>导出

selector:

顾名思义,就是个选择器,一个能通过原生JS选中的选择器而已(必填配置)。

templateUrl:

Angular 组件模板文件的 URL。如果提供了它,就不要再用 template来提供内联模板了(templateUrltemplate选项二选一,必填配置)。

styleUrls:

这也不难看出,就是引入一个或多个样式路径的配置(可选配置)

如果组件比较简单,我们也可以不必单独抽出页面及样式,@Component的配置项可以直接使用内联形式:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    

{{title}}

My favorite hero is: {{myHero}}

`, styles: [`h1 { color: red }`] }) export class AppComponent { // 组件名AppComponent title = 'Tour of Heroes'; myHero = 'Windstorm'; }

到此为止,我们其实简单讲了下默认的这个App模块,至于里面的app-routing.module.ts这个文件,咱们后面遇到了再说。

angular应用总的思路应该是这样的:

举例说明,如果一个angular应用是一个公司,那么AppModule就是这个公司。AppComponent就是这个公司的一个工厂,公司可以有很多个工厂。declearation数组里面的元素就是组成工厂的一部分,比如生产车间、人员管理系统等。imports数组就像是工厂请来的外援,专业性比较强。providers数组就像是后勤部门,提供各种服务。

更多编程相关知识,请访问:编程入门!!

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue.js:纪录片
Vue.js:纪录片

共1课时 | 0.2万人学习

Angular js入门篇
Angular js入门篇

共17课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号