Angular 笔记3（英雄指南）

最新推荐文章于 2021-06-17 20:29:41 发布
最新推荐文章于 2021-06-17 20:29:41 发布
阅读量161 收藏 1
点赞数
分类专栏： Angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hequhecong10857/article/details/109229273
版权

文章目录

教程：英雄指南

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

管道

在这里插入图片描述

双向绑定

[(ngModel)] 是 Angular 的双向数据绑定语法。
使用双向绑定，需要在app.module.ts文件中引入FormsModule模块
在这里插入图片描述
在这里插入图片描述

CSS类绑定

在这里插入图片描述

Observable（RxJS）

在这里插入图片描述

路由

添加 AppRoutingModule

在 Angular 中，最好在一个独立的顶层模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它。按照惯例，这个模块类的名字叫做 AppRoutingModule，并且位于 src/app 下的 app-routing.module.ts 文件中。
在这里插入图片描述

添加路由出口 RouterOutlet

在这里插入图片描述

添加路由链接 (routerLink)

在这里插入图片描述

路由类型

  1. 简单路由
  2. 重定向路由
  3. 带参数的路由
    在这里插入图片描述

获取带参数的路由

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

回退

在这里插入图片描述

服务端请求数据

启用HTTP服务

在这里插入图片描述

HttpClient返回数据

在这里插入图片描述

错误处理

在这里插入图片描述

HTTP修改数据

在这里插入图片描述

HTTP添加数据

在这里插入图片描述

HTTP删除数据

在这里插入图片描述

http Options

在这里插入图片描述

优化搜索操作

在这里插入图片描述

异步管道

在这里插入图片描述

何去何从2857
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular“英雄指南”(一)--No provider for HeroService!
kikyou_csdn的博客
06-21 5626
报错—–No provider for HeroService! “英雄指南”进行到教程-6服务时的报错 定义providedIn 元数据的值是 ‘root’时： 运行时 解决： 还不知道原因，原本以为和“No provider for HeroService”有关 在app.module.ts中(只需定义在providers中)： import { Hero...
angular英雄教程学习
z495719912的博客
02-04 864
1. 搭建开发环境 1.安装angular/cli => npm install @angular/cli 2. 新建angular项目 => ng new Myangular 3. 打开angular项目 => ng serve 2. 创建新组件 创建新组件：ng generate component home 3.设置属性，...
angular英雄指南
03-21
结合最新的angular官方文档，和官方文档一致的开发流程，手动搭建项目结构，完整实现angular官方英雄指南系列。
Angular英雄指南教程-遇到的坑-服务注入
xqlsrjjjh
05-23 5655
首先给出Angular的入门示例 英雄指南教程 的链接地址（这个入门级 app 包含很多数据驱动的应用所需的特性。 它需要获取并显示英雄的列表、编辑所选英雄的详情，并且在英雄数据的不同视图之间导航。） https://www.angular.cn/tutorial 我的Angular CLI信息： Angular CLI: 1.7.4 Node: 8.9.3 OS: win32 ...
angular-英雄指南
gzhu_wzb
06-04 687
在angular官网上下载了英雄指南toh-1，执行了npm install之后，在执行npm start，会出现404 GET /index.html 的错误，console输出如下， 详情见http://blog.csdn.net/qq_26030709/article/details/71024408 npm start启动的时候提示‘没有bs-config.json,将使用默认配置’。
angular2-英雄指南教程http请求
01-17 4934
看这个之前，你要确保你的教程没错，能跑起来。最近好多人都遇到http请求问题。不知道怎么跟后台接口对接。首先，在我们的英雄指南教程里面，有个模拟的假数据，我们不需要导入他，那么在app.module.ts里面，我们需要把导入的angular-in-memory-web-api注释掉或者删掉，同时需要在下面@NgModule里面的imports:里找到如下代码删掉即可：InMemoryWebApiM
angular笔记详解
11-10
3. **组件（Components）**：组件是Angular应用的基石，它们负责呈现UI。组件由HTML模板和关联的 TypeScript 类构成，通过`@Component`装饰器定义。组件可以嵌套，形成组件树。 4. **数据绑定**：Angular的数据绑定...
angular学习笔记
06-24
angular学习笔记
angular 学习笔记
最新发布
12-20
3.路由和导航（路由基础知识，在路由时传递参数，路由高级特性） 4.依赖注入（依赖注入模式介绍，Angular对依赖注入的实现方式，Angular的提供器和注入器） 5.绑定、响应式编程和管道（数据绑定，响应式编程，管道）...
Angular4 官方英雄编辑器
06-02
**Angular4 官方英雄编辑器** Angular4 是一个强大的前端框架，用于构建单页应用程序（SPA）。这个项目，"Angular4 官方英雄编辑器"，是基于Angular4官方教程创建的一个示例应用，旨在帮助开发者理解Angular4的基础...
angular2-英雄指南教程（详讲小白上手会遇到的坑）
12-21 5041
首先给大家说一下ng2的官网：https://www.angular.io（这是需要翻墙的，不然看不了）。中文官网：https://www.angular.cn（里面有英雄指南教程），大家可以跟着教程一步一步来，当然，在做英雄指南教程之前，还是先搭环境，node是基本的，然后在中文官网https://www.angular.cn/docs/ts/latest/guide/setup.html，运行
英雄之旅：Angular教程应用
02-12
英雄之旅 Angular教程应用
Angular 官方教程：英雄指南 下载运行不了
大强博客
08-05 717
1、报错信息： D:\eclipse-workspace\dqgy\dqgy\toh-pt6>ng test Could not find module "@angular-devkit/build-angular" from "D:\\eclipse-workspace\\dqgy\\dqgy\\toh-pt6". Error: Could not find module "@angul...
Angular 教程：英雄之旅
Liu-FE的博客
06-17 1361
Angular 教程：英雄之旅
angular官网英雄教程采坑记录
etemal_bright的博客
05-04 365
第8章 Http 内存 Web API（In-memory Web API） 模拟出的远程数据服务器通讯。 我执行如下命令行 npm install angular-in-memory-web-api 下载下来是0.6版本，但是ng serve –o的时候会报错，如下所示 500，服务器错误 找原因，论坛上几乎没有，还是去github上看吧问题答案 最后执行如下命令行 即可 ...
Angular 英雄示例教程
HONEY MOOSE
05-22 502
英雄指南教程（Tour of Heroes）涵盖了 Angular 的基本知识。 在本教程中，你将构建一个应用，来帮助人事代理机构来管理一群英雄。 这个入门级 app 包含很多数据驱动的应用所需的特性。 它需要获取并显示英雄的列表、编辑所选英雄的详情，并且在包含有英雄数据的不同视图之间进行导航。 在本教程的最后，你的应用可以做下面的工作： 使用Angular 的内置指令（Angular d...
AngularJS教程：英雄编辑器
IT老兵的驿站
01-08 2539
本地搭建环境去开发 真正的应用程序开发是发生在像你的机器一样的本地的开发环境中的。 跟随着 setup 指导去创建一个新的名为angular-tour-of-heroes 的项目后，文件结构看起来就像这样： 英雄编辑器 We build a simple hero editor 我们建立一个简单的英雄编辑器。 Setup to develop locally 在本地开发配置开发 Real application development takes place i
【Angular4】英雄指南demo
follow your heart
03-17 337
快速上手 1.安装node.js和npm管理包 2.安装angular CLI,来创建angular应用 3.创建新的工作区 ng new my-app,进入工作区，启用服务器 应用的外壳 1.创建一个工作区 ng new 工作区名称，创建工作区和初始应用后 2. cd 工作目录 ng serve --open启用这个应用 3.看到的angular组件，就是整个应用的外壳 4.应用的外壳包含了...
angular的hero例子（5）
u011747152的博客
12-05 980
route的使用 ng generate module app-routing –flat –module=app ng generate component dashboard 代码： heroes.component.tsimport { Component, OnInit } from '@angular/core';import { Hero } from '../hero';
Angular规范及相关实践.pptx
06-19
Angular规范及相关实践是一个关于Angular开发规范和最佳实践的培训课程。该课程包含了一份名为"Angular规范及相关实践"的幻灯片演示文稿，旨在帮助开发人员遵循一套规范的命名约定和最佳实践，以提高代码的可读性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值