Angular7入门辅助教程（一）——Angular模块

最新推荐文章于 2023-12-11 14:23:31 发布
VIP文章 最新推荐文章于 2023-12-11 14:23:31 发布
阅读量6k 收藏 23
点赞数 5
分类专栏： Angular7知识点分享 Angular7入门辅助教程 文章标签： Angular7模块 Angular7入门教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34414916/article/details/85164742
版权

如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇

NgModule

本篇博客主要介绍一下Angular模块是什么、有什么用、我们应该如何使用Angular模块，以及其与ts模块的区别等等一些知识点

心法篇

  • Angular应用是模块化的，拥有自己的模块系统，称为NgModule。
  • 一个NgModule是一个容器，里面存放一些内聚的代码块，这些代码块专注于某应用领域、某工作流或一组紧密相关的功能。
  • NgModule可以包含组件、服务提供商、指令等，这些组件既可以在本模块中使用，也可以以某种方式供外部模块使用。
  • 一个应用至少包含一个NgModule，我们成为根模块（AppModule），根模块和其他普通的模块有点不同，因为它要引导应用启动。

详细教程篇

1、Angular模块的元数据对象

Angular怎么知道这是一个NgModule，总得有一个标识吧！这个标识就是@NgModule装饰器，@NgModule接受一个元数据对象作为参数，它用来描述一个Angular模块（Angular组件、指令、服务等都有自己的元数据对象！）&

最低0.47元/天 解锁文章
数星星等天明
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Angular 环境配置
zaihukeji的博客
08-18 742
如何使用环境配置 在实际开发中，总是需要针对不同的环境设定不同的参数，Angular 提供了一种应用环境机制，当使用ng new构建一个新项目时默认会在src/environments目录下针对开发环境与生产环境（environment.prod.ts）的配置项。 绝大多数情况下，我们生产环境的后端请求地址与开发环境是不一样，因此可以分别为其定义不同的域，例如： // environment.ts export const environment = { production: fals...
Angular7入门辅助教程（五）——Observable（可观察对象）
热门推荐
数星星等天明的博客
12-25 2万+
如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇 Observable 在开始讲服务之前，我们先来看一下一个新东西——Observable（可观察对象），是属于RxJS库里面的一个对象，可以用来处理异步事件，例如HTTP请求（实际上，在Angular中，所有的HTTP请求返回的都是Obse...
Angular基础知识整理
qq_40843345的博客
12-06 943
angular2基础知识
angular7教程(1)——初步了解angular7及项目构建
小牛呼噜噜的博客
03-14 6016
1、安装cli npm install -g @angular/cli 2、创建工作区和初始应用项目 ng new my-app npm ERR! path E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js npm ERR! code EPERM npm ERR!...
Angular NgModule 中的 declarations 和 exports定义
SAP 资深技术专家 Jerry Wang 的技术分享
02-13 3441
我在app.component.ts的template文件里试图使用另一个Component时，遇到如下错误消息： app-parent-child is not a known element: 在parent.module.ts定义里，检查exports区域里是否包含了selector app-parent-child对应的Angular Component：ParentChildComponent： declarations: 定义了该NgModule的组成部分：Components, direc
web全栈-第三讲：Angular单页面应用
m0_47670683的博客
11-30 1255
Angular布局模板 bootstrap是通用的css库，angular发布了自己的css库——angular material design。 angular material design官网是https://material.angular.io 。 国内的ant design of anular，官网是https://ng.ant.design 。 Angular：面向组件的设...
使用用 Angular CLI 来创建Angular2项目、应用和库代码，以及文件说明
sxj的专栏
11-30 808
1、要安装CLI命令必须首先安装Nodejs和npm包，npm包在装好nodejs后自带的。 2、首先创建一个目录，用来创建Angular项目，如下图所示： 3、打开dos窗口，然后进入到此目录中，如下图所示： 4、安装 Angular CLI，使用：npm install -g @angular/cli 命令全局安装 Angular CLI，如下图所示： 5、安装完之后如果没...
angular公共组件声明和使用
zwbHUST的博客
02-19 1353
如果要声明一个公共组件，在app.module.ts中引入，declarations元数据数组中声明。这样所有属于AppModule模块的其他组件模板都可以使用。 注意红字部分，在app.module.ts中声明公共组件，只有属于AppModule模块的其他组件的才能使用，有些子模块中的组件不能使用这个app.module.ts中声明公共组件。 ...
无涯教程-Angular7 - 简介
最新发布
无涯教程
12-11 283
Angular 7是一个开放源代码JavaScript框架，用于在JavaScript, html 和Typescript(JavaScript的超集)中构建Web应用程序和应用程序。Angular为animation，http service和materials提供了内置功能，这些功能又具有 auto-complete，naigation，toolbar，menus等功能。代码以Typescript编写，可编译为JavaScript，并在JavaScript中显示。Angular 7的应用。
Angular学习总结-入门篇
小冷在努力~
12-06 5695
目录 一、Angular介绍 二、 学习Angular必备基础 三、 Angular环境搭建 四、 Angular创建项目 五、 Angular环境搭建以及创建项目的时候可能遇到的错误 六、Angular开发工具介绍 Angular项目结构介绍 创建组件/服务 angular语法 变量 ngFor循环+ngIf判断+ngSwitch 动态修改样式ngClass+ngStyle 双向数据绑定 管道(Pipe) 获取dom节点 ng...
Angular 的使用感受。
茶儿啤酒的博客
02-18 563
今天来谈一谈 Augular。 Angular 是谷歌公司推出的一款前端框架。谷歌、英特尔、Lyft 等公司都在使用。更多使用 Angular 的公司可以查看 Angular - stackshare。 Angular V.S. AngularJS Angular 开发的一个风水岭，就是 2014 年提出了 Angular 2.0 版本。（2.0 版本的正式发行则要到 2016年。）与之前的 An...
Angular2入门教程之模块和组件详解
12-12
一、初步了解模块和组件 之前给大家介绍了构建工程，这篇文章简单讲述一下Angular2中的模块和组件。 app文件夹下有五个文件，其中，app.component.spec.ts应该是和模块测试有关的文件，目前不用管它。剩下的四个...
javascript教程_Angular2入门
07-22
资源名称：Javaｓｃｒｉｐｔ教程_Angular2 入门   内容简介： 本文档是Angular2 入门;Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2? AngularJS当初是提供给设计人员用来快速构建HTML...
angular2入门，就这一篇就够了
01-27
AngularJS2是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。AngularJS2是Angular1.x的升级版本，性能上得到显著的提高，能很好的支持 Web开发组件。AngularJS2发布于2016年9月份，它是基于ES6...
Angular2学习笔记——详解NgModule模块
11-28
模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。 NgModule的主要属性如下： declarations...
Angular7入门辅助教程（六）——Subject（可多播的可观察对象）
数星星等天明的博客
12-25 9143
如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇 Subject 在前一篇教程中了解了一下Observable可观察对象，在RxJS库中还有另外一个重要的对象——Subject，用它可以创建多播的可观察对象，接下来，我们大致了解一下 心法篇 我们使用Observable创建的可观...
Angular7入门辅助教程——前篇
数星星等天明的博客
12-25 7786
Angular7入门辅助教程 1、Angular简介 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。（复制官网的），它是用typescript（ts）写成的一个前端框架，拥有面向对象的特点（这其实是type...
Angular7入门辅助教程（二）——组件和模板
数星星等天明的博客
12-25 4462
如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇 Component Angular中的组件是非常重要的知识点，因为它构成了Angular应用，所以这篇博客来介绍一下Angular中与组件和模板有关的知识点！例如视图、数据绑定、数据显示、组件类与模板的交互等等 心法篇 组件和模板...
angular入门教程
07-22
如果你是初学者，以下是一个简单的 Angular 入门教程，帮助你开始学习 Angular： 1. 安装 Angular CLI：首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，使用 npm 安装 Angular CLI。在命令行中运行以下命令： ``` npm install -g @angular/cli ``` 2. 创建新的 Angular 项目：使用 Angular CLI 创建一个新的 Angular 项目。在命令行中运行以下命令： ``` ng new my-app ``` 这将创建一个名为 "my-app" 的新项目，并自动安装所需的依赖项。 3. 运行应用程序：进入项目目录，然后使用以下命令启动开发服务器： ``` cd my-app ng serve ``` 这将启动一个开发服务器，并在默认端口上运行你的应用程序（通常是 http://localhost:4200）。 4. 编辑应用程序：打开你喜欢的代码编辑器，并导航到 "src/app" 目录。在这里，你将找到应用程序的根组件 "app.component.ts"。你可以编辑这个文件并开始构建你的应用程序。 5. 添加新组件：使用 Angular CLI 生成一个新的组件。在命令行中运行以下命令： ``` ng generate component my-component ``` 这将生成一个名为 "my-component" 的新组件，并自动更新应用程序中的文件和配置。 6. 在应用程序中使用组件：在根组件的模板中使用新生成的组件，或者在其他组件中使用它。 以上是一个简单的 Angular 入门教程。当你熟悉了这些基础知识后，你可以继续学习 Angular 的更多高级主题，如路由、表单处理、服务等。记得查阅官方文档和其他教程资源以获得更多深入的学习。祝你学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值