Angular 2-简单的HTTP GET from组件无法工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上的最佳实践（n）共享模块XxxModule.forRoot配置核心服务知识点

@NgModule接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。...Angular模块把组件、指令和管道打包成内聚的功能块，每块聚焦于一个特性分区、业务领域、工作流或一组通用的工具。... Angular模块是由一个@NgModule装饰器提供元数据的类，元数据包括： 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类，以便其他的组件模块可以使用它们...特性模块可以对其他模块暴露或隐藏自己的实现。特性模块用来提供了内聚的功能集合。聚焦于应用的某个业务领域、用户工作流、某个基础设施（表单、HTTP、路由），或一组相关的工具集合。...特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。共享模块共享模块其实就是将一些公共的东西整理出来，放到一个模块中去，避免了其他模块的重复导入。

3K3 0

使用Angular8和百度地图api开发《旅游清单》

至此，项目的基本准备工作已经做好了，下面让我们先聊一聊angular。...官方提供的架构图：我们知道，一个完整的angular应该包括：模块 Angular 定义了 NgModule，NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力...根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。组件每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...} from '@angular/common/http'; import { Storage } from '....} from '@angular/router'; import { Input } from '@angular/core'; import { Http } from '..

7.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

Angular2 ：从 beta 到 release4.0 版本升级总结

管理公用组件创建SharedModule管理所有公用组件 import {NgModule} from '@angular/core'; import {CommonModule} from '@angular...请求内容带url时后台解析错误原因：angular(v4.0.0)中封装的http服务对参数standardEncoding编码方法，见node_modules/@angular/http/@angular...组件迁移后，无法正确订阅事件原因：angular(v4.0.0)中依赖注入，若在不同地方声明provider，则会创建不同的实例。...无法从router里获取RouteParams的API。原因：angular(v4.1.1)中，使用ActivatedRoute的API获取路由信息。...使用angular-cli后无法自定义webpack的alias, 导致文件引入路径很长，如../../../shared/。

12.2K0 0

Angular 从入坑到挖坑 - HTTP 请求概览

一、Overview angular 入坑记录的笔记第四篇，介绍在 angular 中如何通过 HttpClient 类发起 http 请求，从而完成与后端的数据交互。...使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览三、Knowledge Graph ?...四、Step by Step 4.1、与后端进行数据交互 4.1.1、前置工作在前端项目与后端进行数据交互时，绝大多数都是通过 HTTP 协议进行的，现代浏览器支持两种方式向后端发起 HTTP 请求：...，从而确保组件中仅仅包含的是必要的业务逻辑行为 import { Injectable } from '@angular/core'; // 引入 HttpClient 类 import { HttpClient...而在组件处仅显示错误提示在服务中定义一个错误处理器，用来处理与后端请求中发生的错误 import { Injectable } from '@angular/core'; import { Observable

7.6K1 0

Angular HttpClient 拦截器

在之前的 Angular 6 HttpClient 快速入门文章中，我们已经简单介绍了 Http 拦截器。本文将会进一步分析一下 Http 拦截器。拦截器提供了一种用于拦截、修改请求和响应的机制。...： import { Component } from "@angular/core"; import { HttpClient } from "@angular/common/http"; @Component...，控制台会输出一下信息： GET http://jsonplaceholder.typicode.com/users succeeded in 728ms 好的，趁热打铁，我们再来一个例子，即介绍如何利用拦截器实现简单的缓存控制...in 1255ms 通过观察以上的输出内容，我们发现 CachingInterceptor 已经能按照我们的预期正常工作了。...这里只是简单介绍了如何为 AuthInterceptor 拦截器写单元测试，对于单元测试的同学，建议阅读官方或其他的学习资料。

3.4K2 0

Angular 快速学习笔记(1) -- 官方示例要点

把它标记为一个 HeroService 的注入点在ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用，但是我们需要让构造函数保持简单，只做初始化操作 b....ActivatedRoute 保存着到lComponent 实例的路由信息，this.route.snapshot.paramMap.get('id') ii. location 是一个 Angular...HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制 b....使用 getHeroes (): Observable { return this.http.get(this.heroesUrl) }...tap窥探(tap)Observable getHeroes (): Observable { return this.http.get<Hero[]

5.4K5 0

Angular 快速学习笔记(1) -- 官方示例要点

5.3K0 0

Angular: 最佳实践

组件 Component 组件是 Angular 的核心特性，如果你设法让它们被组织得井井有条，你可以认为你工作已经完成了一半。考虑拥有一个或者几个基本组件类。...（它也可能执行一些其他常见的任务）并将实际的工作委托给另外一个组件。...所以，下面有几条规则需要考虑下：有一个 API 调用的基础服务类。将简单的 HTTP 服务逻辑放在基类中，并从中派生 API 服务。...token: token}); } protected get(relativeUrl: string): Observable { return this.http.get...读者可能意识到我并没有写关于 Directives 和 Pipes 的相关内容，那是因为我想写篇详细的文章，关于 Angular 中 DOM 是怎么工作的。

4.3K4 0

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

: 20px 50px; width: 100%; text-align: center; } 创建服务要和后台交互，我们就需要有http请求，需要用到angular的http模块。...从angular2到现在的angular5http模块也有些变化。.../api-base-service" import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs...blog.service.ts，这个写的是组件，并在模块中声明了 import { Injectable } from '@angular/core'; import {HttpClient} from...加入动画效果有动画使用相关疑惑的可以参考我的这篇文章及其相关文章：Angular练习之animations动画源码下载思考 angular模块，组件，普通的ts文件之间的关系和区别。

2.3K3 0

了解 Angular 开发的内容

我们这里约定 app/pages 目录下的组件是页面组件，其页面组件下的 components 是页面组件的私有组件。app/components 是公有组件。现在我们新建一个用户的列表页面。...如果你重复去新建一个组件，则脚手架不会执行，不用害怕在同一个地方有重复的组件出现路由 Router 不同的路由，表示你访问不同的页面组件。...因为这里的功能比较简单，我们简单修改下 get-first-character.pipe.ts 文件就很满足要求了。...import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable...import { HttpClientModule } from '@angular/common/http'; // ...

1.5K4 1

Angular 依赖注入初认

可以简单地认为它是一个功能模块，重要在于它是单例对象，并且可以注入到其他的地方使用。...在 Angular 中定义一个服务很简单，主要在类之前加上 @Injectable 装饰器的功能。这是最常见的依赖注入方式 useClass，其他具体参见这里。...这个可以从Service中的数据变化来看出。 Angular还有个分层依赖注入的概念，也就是说，你可以为任一组件创建自己独立的服务。...import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable...this.http.get(`/data`) } }

6964 0

Angular核心-创建对象-HttpClient

，注入给服务需要者 Angular核心概念—服务和依赖注入 Service：服务，Angular认为：组件与用户交互的一种对象，其中的内容都应该与用户操作有关系的；而与用户操作无关的内容都应该剥离出去，...放在“服务对象”中，为组件服务；例如：日志记录，记时统计，数据服务器的访问… 创建服务对象的步骤： 1.创建服务对象并指定服务提供者 import { Injectable } from "@angular...import {HttpClientModule} from ‘@angular/common/http’; import :[BrowserModel，FormsModule，HttpClientModule...=http } 3.调用HttpClient实例实现异步请求 this.http.get(url).subscribe((res: any)=>{}）效果图展示：调用下列方法：即可得到调用...a=getPortalList&catid=20&page=1' //使用注入进来的HttpClient实例发起异步请求 this.http.get(url).subscribe((res

1.7K2 0

webpack+es6+angular1.x项目构建

eslint简单的讲，就是让自己少犯错，也让队友更容易的看懂你的代码。本项目，选择的是ESlint的推荐配置，唯一注意的是全局变量中把angular的关键词加上。...一个组件页面由4个文件组成，分别是index.js(此页面组件的出口，也是其余逻辑，样式的入口) import loginCtrl from './login' import tem from '....this.http.get({userName: 'link', userPassword: '123456'}, url.login, (data) => { console.info...统一管理页面组件在刚刚components目录下写好的login页面组件目录的同级，建立一个index.js，作用是用来统一管理组件页面。即： import login from '....以上，就简单的构建好了一个webpack+es6+angular1.x的项目。项目地址参考：https://github.com/jiwenjiang/angularSeed

1.2K3 0

Angular 与 rxjs 中 take(1) 的运用解析

下面展示一个简单示例，说明在 Angular 组件中利用 RxJS 中的 of 操作符创建一个数据流，然后使用 pipe 方法配合 take(1) 操作符对该数据流进行截取，进而只获取第一个数据项后自动完成订阅...将 take(1) 与 HTTP 请求结合使用，可以解决在组件初始化时需要获取服务端数据而又不希望出现持续订阅的问题。...例如，在使用 Angular 内置 HttpClient 发起 HTTP GET 请求时，返回的 Observable 会在成功获取数据后发出一个响应数据。...from `@angular/core`;import { HttpClient } from `@angular/common/http`;import { Observable } from `rxjs...{ constructor (private http : HttpClient) { } getData () : Observable { return this.http.get

6880 0

Angular 应用中手动调用 subscribe 方法的时机与实践探讨

subscribe 方法来启动请求并处理响应数据　此时不仅需要关注数据的获取　还必须处理可能出现的异常情况与请求完成后的清理工作　这类场景下手动调用 subscribe 方法成为必然选择Angular...　在这种场景下　Angular 的模板绑定无法满足复杂的业务逻辑处理需求　必须借助手动订阅来实现更加灵活的数据处理方案组件内的生命周期管理也是决定是否手动调用 subscribe 方法的重要因素　在组件初始化期间...import { Component , OnDestroy } from `@angular/core`;import { HttpClient } from `@angular/common/http...: HttpClient) { const dataObservable = this.http.get(`https://api.example.com/data`); this.subscription...　应根据具体的业务场景与功能需求　权衡模板内自动订阅与组件内手动订阅之间的利弊　对于单向数据传递与简单展示任务　建议优先采用 async pipe　而对于需要复杂数据处理、错误捕获、逻辑分支以及多数据流协同工作的情况

4531 0

Angular 6.x 快速入门

基础知识定义组件的元信息在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息： @Component({ selector: 'my-app', // 用于定义组件在.../common/http 模块中导入 HttpClient； (2) 使用构造注入，注入 http 服务； (3) 调用 http 服务的 get() 方法，设置请求地址并发送 HTTP 请求； (4)...: HttpClient) { } // (2) ngOnInit() { this.http.get(`https://api.github.com/orgs/angular...'@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable }from 'rxjs'...router-outlet 指令该指令用于告诉 Angular 在哪里加载组件，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到

16.5K2 0

Angular Library 快速入门

创建 sf-lib 组件相信 ng generate 命令对于使用过 Angular CLI 的同学来说，都不会陌生。...接着从 sf-lib 模块中导出组件： import { NgModule } from "@angular/core"; import { SfLibComponent } from "....在完成新建 ButtonComponent 组件的导出工作后，我们需要使用下列命令，重新构建 sf-lib 库： $ ng build --prod sf-lib sf-lib 重新构建成功后，我们就可以在模板中使用刚创建的..."@angular/core"; import { HttpClient } from "@angular/common/http"; import { SfLibConfigService } from...: HttpClient ) {} getData() { return this.http.get(this.config.dataUrl); } } 更新完 DataService

3.3K1 0

Angular 16 正式版发布

用户通常希望在相关Subject完成时完成一个流，以下模式非常常见： destroyed$ = new ReplaySubject(1); data$ = http.get('...').pipe...，简单使用示例如下： data$=http.get('…').pipe(takeUntilDestroyed()); 默认情况下，此操作符将注入当前的清理上下文。...1.3signals下一阶段接下来我们将研究基于信号组件，信号组件将会简化生命周期钩子函数以及一种简单的声明式输入(inputs)和输出(outputs)，我们还将编写一套更完整的示例和文档。...我们还为内联样式引入了对更严格的内容安全策略的支持。 2.2 Hydration 和服务端渲染的下一步 v16 中的工作只是一块垫脚石，我们计划在这里做更多的工作。...我们在 2022 年交付的基于 MDC Web 的组件为这项工作奠定了基础。

4.5K1 0

模块化开发 Angular 应用

简单来说，一个模块就是一个类，就像组件和服务一样。 Angular 中的代码通常以模块的形式组织。我们可以将模块视为包含特定用例所需要代码的包或捆绑包。...比如 Http-Client-Module，它包含一个很有用处的 Http-Client 和 Forms-Module（其中包含 UI 组件和 HTML-Forms 指令）。...就像组件一样，生成的结构是一个模块树。 @NgModule 在 @NgModule 操作符里面，我们定义模块的所有属性。我们提供了一个简单的 JavaScript 对象作为参数。...这意味着，我们的模块在导入时将这些模块提供给其他模块。否则，这些模块将停留在模块内部，无法从外部访问。...当你以惰性方式加载模块时，它不会包含在初始的程序中。相反，它仅在需要的时候才下载。为啥要下载我们还没用得上的组件呢，是吧？那么，它是怎么工作的？我们用惰性加载方式更改下先前的例子。

4K1 0

Angular2 之单元测试

组件的测试单独的service测试 Angular的测试工具 Angular的测试工具类包含了TestBed类和一些辅助函数方法，当时这不是唯一的，你可以不依赖Angular 的DI（依赖注入）系统，...测试组件 import { Component } from '@angular/core'; @Component({ selector: 'app-banner', template:...被注入组件的userService实例是彻底不一样的对象，是提供的userServiceStub 的克隆。 TestBed.get方法从根注入器中获取服务。...如果组件想期待的那样工作，click()通知组件的selected属性发出hero对象，测试程序通过订阅selected事件而检测到这个值，所以测试应该成功。...: Http; // 还应该是DI系统的 beforeEach(() => { const testBed = makeEnvironment(); http = testBed.get

7K2 0

点击加载更多

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上的最佳实践（n）共享模块XxxModule.forRoot配置核心服务知识点

使用Angular8和百度地图api开发《旅游清单》

Angular2 ：从 beta 到 release4.0 版本升级总结

Angular 从入坑到挖坑 - HTTP 请求概览

Angular HttpClient 拦截器

Angular 快速学习笔记(1) -- 官方示例要点

Angular 快速学习笔记(1) -- 官方示例要点

Angular: 最佳实践

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

了解 Angular 开发的内容

Angular 依赖注入初认

Angular核心-创建对象-HttpClient

webpack+es6+angular1.x项目构建

Angular 与 rxjs 中 take(1) 的运用解析

Angular 应用中手动调用 subscribe 方法的时机与实践探讨

Angular 6.x 快速入门

Angular Library 快速入门

Angular 16 正式版发布

模块化开发 Angular 应用

Angular2 之单元测试

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐