随笔分类 -  Type script

Angular(17) - 从服务端获取数据 - 官方教程英雄指南之添加智能搜索 （详细解说）
摘要：1 创建搜索组件 HeroSearchComponent ng generate component hero-search 2 添加搜索组件模板 需要一个搜索框,用来记录用户输入的值 <input #searchBox id="search-box" (input)="search(searchB 阅读全文
posted @ 2020-08-20 16:35 三重罗生门 阅读(294) 评论(0) 推荐(0)
Angular(16) - 从服务端获取数据 - 官方教程英雄指南之英雄的CRUD （详细解说）
摘要：1 通过 id 获取英雄, 暴露 getHero(id: number): Observable<Hero> 返回可观察对象 Hero, 可以看到,不同的地方在于获取的地址变成了 `$ src/app/hero.service.ts /** GET hero by id. Will 404 if i 阅读全文
posted @ 2020-08-20 15:44 三重罗生门 阅读(303) 评论(0) 推荐(0)
Angular(15) - 从服务端获取数据 - 官方教程英雄指南之服务调用HTTP数据 （详细解说）
摘要：1 从服务中调用HTTP数据, 导入服务 src/app/hero.service.ts 1.1 导入相关服务 import { HttpClient, HttpHeaders } from '@angular/common/http'; 1.2 构造函数注入 constructor( privat 阅读全文
posted @ 2020-08-20 15:04 三重罗生门 阅读(453) 评论(0) 推荐(0)
Angular(14) - 从服务端获取数据 - 官方教程英雄指南之添加模拟服务器 （详细解说）
摘要：1 加入HTTP服务 src/app/app.module.ts ( 导入服务 import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule, ], }) 2 模拟数据 阅读全文
posted @ 2020-08-20 14:07 三重罗生门 阅读(308) 评论(0) 推荐(0)
Angular(13) - 添加面板 - 官方教程英雄指南之添加仪表盘 （详细解说）
摘要：1 生成面板组件 ng generate component dashboard 2 修改面板文件 2.1 dashboard组件中，加载样式，并通过循环*ngFor输出英雄的名字 src/app/dashboard/dashboard.component.html <h3>Top Heroes</ 阅读全文
posted @ 2020-08-18 20:26 三重罗生门 阅读(376) 评论(0) 推荐(0)
Angular(12) - 添加导航 - 官方教程英雄指南之添加应用内导航 （详细解说）
摘要：添加应用内导航Navigation，官方实际效果图，最终的图和官方还是有区别的 1 添加导航模块 ng generate module app-routing --flat --module=app --flat 把这个文件放进了 src/app 中，而不是单独的目录中。 --module=app 阅读全文
posted @ 2020-08-18 19:53 三重罗生门 阅读(359) 评论(0) 推荐(0)
Angular(11) - 使用消息通知 - 官方教程英雄指南之添加消息服务 （详细解说）
摘要：有了异步方法，我们希望有更好的用户体验，希望在获取数据的时候也可以让用户知道后台等待的状态。这样就有了今天的主题，消息通知。 1 创建消息组件 ng generate component messages 2 创建消息服务 ng generate service message 3 修改全局组件 s 阅读全文
posted @ 2020-08-17 10:48 三重罗生门 阅读(597) 评论(0) 推荐(0)
Angular(10) - 使用异步方法获取数据 - 官方教程英雄指南之添加异步方法 （详细解说）
摘要：1 使用异步方法获取数据。 HeroService.getHeroes() 的函数签名是同步的，它所隐含的假设是 HeroService 总是能同步获取英雄列表数据。 而 HeroesComponent 也同样假设能同步取到 getHeroes() 的结果。 这在真实的应用中几乎是不可能的,因为网络 阅读全文
posted @ 2020-08-17 09:46 三重罗生门 阅读(603) 评论(0) 推荐(0)
Angular(9) - 使用服务 - 官方教程英雄指南之添加服务 （详细解说）
摘要：1 为何需要服务？ 让我们带着思考去学习 服务是什么？服务就相当于是数据访问层，专门提供服务给其他模块的功能。就相当于服务专门于提供，处理数据，而模板则专心于展示，渲染数据 模板和服务的关系？模板应该专注于展示数据，只要是符合规格的数据给过来，模板都可以渲染，至于数据是怎么来的，模板不需要关心。 用 阅读全文
posted @ 2020-08-17 08:45 三重罗生门 阅读(258) 评论(0) 推荐(0)
Angular(8) - 创建特性组件 - 官方教程英雄指南之特性组件 （详细解说）
摘要：1 我们为什么需要特性组件， 为什么都是组件？ 此刻，HeroesComponent 同时显示了英雄列表和所选英雄的详情。 把所有特性都放在同一个组件中，将会使应用“长大”后变得不可维护。 你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流 组件，也就是意味，可以重 阅读全文
posted @ 2020-08-14 19:13 三重罗生门 阅读(317) 评论(0) 推荐(0)
Angular(7) - 显示英雄详情 - 官方教程英雄指南之详情区域 （详细解说）
摘要：1 添加详情区域，组件的模板中有一个列表。要想点击列表中的一个英雄，并显示该英雄的详情，你需要在模板中留一个区域，用来显示这些详情 heroes.component.html <h2>{{selectedHero.name | uppercase}} Details</h2> <div><span> 阅读全文
posted @ 2020-08-14 08:24 三重罗生门 阅读(280) 评论(0) 推荐(0)
Angular(5) - 英雄编辑器 - 官方教程英雄指南之双向绑定 （详细解说）
摘要：1 输入和输出的绑定, 修改相应的代码如下， 你会发现我们增加了一个 [(ngModel)]="hero.name" 的属性 src/app/heroes/heroes.component.html (HeroesComponent's template) <div> <label>name: <i 阅读全文
posted @ 2020-08-13 20:05 三重罗生门 阅读(197) 评论(0) 推荐(0)
Angular(4) - 英雄编辑器 - 官方教程英雄指南之添加英雄组件 （详细解说）
摘要：1 创建英雄组件 ng generate component heroes 2 查看组件架构 ， 从下图可以很清楚的看出，系统自动生成了4个文件， 修改了1个文件。 3 修改heroes.ts如下图， 增加一个暴露的属性 hero= 'windstorm' export class HeroesCo 阅读全文
posted @ 2020-08-13 19:46 三重罗生门 阅读(373) 评论(0) 推荐(0)
Angular(3) - 组件延伸阅读 - 官方教程英雄指南之组件和全局组件 （详细解说）
摘要：带着问题去学习 组件如何使用 组件与组件之间如何沟通 组件如何使用，要想回答这个问题，先得清楚全局组件与组件之间的关系，看下图 从图中可以很明显的看到，一定有一个root component 组件中是通过html标记 来调用的 组件与组件之间如何沟通， 这个问题先挂起，因为后面用到组件与组件时再讲最 阅读全文
posted @ 2020-08-12 11:15 三重罗生门 阅读(206) 评论(0) 推荐(0)
Angular(2) - 创建项目 - 官方教程英雄指南之创建组件 （详细解说）
摘要：1. 创建项目,找到自己的想要创建的目录，ng-cli将会在当前目前下创建子目录 ng new angular-tour-of-heroes 询问是否启用路由，yes, 想使用哪种样式表，我选择的css 2. 接着，尝试运行 cd angular-tour-of-heroes ng serve -- 阅读全文
posted @ 2020-08-12 10:41 三重罗生门 阅读(324) 评论(1) 推荐(0)
Angular(1) - 前置任务 - 官方教程英雄指南之搭建环境 （详细解说）
摘要：关于Angular 请大家移步 https://angular.cn/ ，我这里也不做任何的对比，比如vs vue, vs react, 我们只对其功能进行描述。 关于初学者的环境搭建，这里希望大家先认真查看官方文档，再进行安装，因为这样的做法才是最省力的 前提条件，要想使用 Angular 框架， 阅读全文
posted @ 2020-08-11 10:37 三重罗生门 阅读(267) 评论(1) 推荐(0)