Angular 笔记2(Angular 范例应用)

快速上手

范例应用

这个范例演示了本篇描述的所有语法和代码片段

组件交互

  1. 创建子组件
    右键单击 app 文件夹,使用 Angular Generator 生成一个名为 product-alerts 的新组件。

  2. 父传子
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 子传父
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

路由

注册路由

在这里插入图片描述
在这里插入图片描述

使用路由信息

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据服务

概念

服务是 Angular 应用的重要组成部分。在 Angular 中,服务是一个类的实例,它可以借助 Angular 的依赖注入系统来让应用中的任何一个部件都能使用它。服务可以让你在应用的各个部件之间共享数据。

创建服务

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

启用HttpClient

Angular 的 HTTP 客户端( HttpClient )是一种内置的方式,可以从外部 API 中获取数据,并以流的形式提供给你的应用。

在 AppModule 中为应用启用 HttpClient

在这里插入图片描述
在这里插入图片描述

在服务中使用 HttpClient

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
异步显示通过http请求获取到的数据。

表单

Angular 的 FormBuilder 服务为生成控件提供了方便的方法。和你使用过的其它服务一样,你需要导入并注入该服务,然后才能使用它:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

部署

本地构建

在这里插入图片描述

ng build --prod

发布

dist/my-project-name 文件夹中的文件都是静态的,可以托管在任何能够提供文件服务的 Web 服务器上(比如 Node.js,Java,.NET),也可以是任何后端(比如 Firebase,Google Cloud,App Engine 等)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值