首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从外部url获取数据种子id和所有给定的,而不是从我的应用程序(路由)在angular 6

从外部URL获取数据种子ID和所有给定的数据,而不是从我的应用程序(路由)在Angular 6中,您可以使用Angular的HttpClient模块来发送HTTP请求并获取数据。

以下是一种可能的方法:

  1. 导入HttpClient模块:
代码语言:txt
复制
import { HttpClient } from '@angular/common/http';
  1. 在组件的构造函数中注入HttpClient:
代码语言:txt
复制
constructor(private http: HttpClient) { }
  1. 创建一个方法来获取数据:
代码语言:txt
复制
getDataFromExternalUrl(url: string) {
  return this.http.get(url);
}
  1. 在需要获取数据的地方调用该方法,并处理返回的数据:
代码语言:txt
复制
this.getDataFromExternalUrl('https://example.com/api/data').subscribe(
  (data: any) => {
    // 处理返回的数据
    console.log(data);
  },
  (error: any) => {
    // 处理错误
    console.error(error);
  }
);

在上面的代码中,getDataFromExternalUrl方法接受一个URL参数,并使用HttpClient的get方法发送GET请求。返回的数据是一个Observable对象,您可以使用subscribe方法来订阅并处理返回的数据或错误。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular应用程序具有路由器服务单个实例,并且每当URL改变时,相应路由就与路由配置数组进行匹配。...如何Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例准则,以更好方式维护代码。...v=bci-Z6nURgE 6.  什么是延迟加载?如何Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。...所有dependencies dev-dependencies都是明确分离。 如果应用程序较大时,我会考虑延迟加载不是完全捆绑应用程序。...但是预编译应用程序会将所有模板样式与组件对齐,因此到服务器Http请求数量会更少。 更快渲染:如果应用程序不是AOT编译,那么应用程序完全加载时,编译过程会发生在浏览器中。

17.3K80

Blazor 中路由路由模板

目前所有 Web 开发框架都具有路由组件,Blazor 也不例外。本文中,将探讨 Blazor 路由引擎实现编程接口。 路由引擎 Blazor 路由引擎是客户端运行组件。...候选路由列表产生自实现 IComponent 接口已探索程序集中类列表,更重要是,使用 Route 属性进行修饰。收集所有路由都存储一个字典中并按最具体到最不具体顺序进行排序。...与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到。... Blazor 中,URL 模式或路由模板被收集路由表中。该表通过查看使用 Route 属性修饰 Blazor 应用程序组件进行填充。每个组件路径都将成为受支持路由模板。...对于具有约束路由,任何无法成功转换为指定类型参数值都会使匹配失效,并且无法识别该路由。 更智能链接编程 URL 导航 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容链接。

8.4K21
  • 如何在 ASP.NET MVC 中集成 AngularJS(1)

    另外,还有最新数据库技术、最新设计模式技术。 当选择最新软件技术时,有几个因素起作用,其中包括如何将这些技术整合起来。...基本 URL 用于整个应用程序中,解决所有相对 URL 问题。你可以应用程序中设置,如下所示母版页 header 部分基本 URL: <!...对于此示例应用程序想将所有Angular 视图相关 Angular JavaScript 控制器放入相同目录下。...你当然会遇到这个错误,因为/View/Customers/CustomerInquiry路由是个 Angular 路由不是 MVC 路由。MVC 并不知道这个路由。...如前所述,此应用程序具有三个功能模块:基本关于、联系我们主页模块、一个客户模块产品模块。 由于此应用程序可随时间增长,不希望该在应用程序配置引导阶段中,预加载所有的功能模块。

    7.6K60

    AngularDart4.0 英雄之旅-教程-07路由

    为了满足这些要求,您将添加Angular路由器到应用程序。 有关路由更多信息,请阅读路由导航页面。  当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...该应用程序仍然运行并显示英雄。 添加路由 应该在用户点击按钮后显示英雄不是自动显示。 换句话说,用户应该能够导航到英雄列表。...并非所有应用程序都需要路由,这就是为什么Angular路由器处于独立可选软件包中原因。...你已经完成了应用程序路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定英雄; 而是点击一个英雄名字,不管名字是显示仪表板还是英雄列表中。...用户可以应用程序周围进行导航,仪表板到英雄详细信息,然后返回,英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。 风格化应用程序应用程序是功能,但它需要样式。

    17.6K30

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    注意用了class不是ng-class,这是不可以对换,官方文档也未做说明,姑且认为这是ng语法规则吧。         ...configFn: 模块启动配置函数,angular config阶段会调用该函数,对模块中组件进行实例化对象实例之前特定配置,如我们常见对$routeProvider配置应用程序路由信息。...请注意它是完全不同方式,一个是声明创建module,另外一个则是获取已经声明了module。应用程序中,对module声明应该有且只有一次;对于获取module,则可以有多次。...AngularJS表达式Angular expression是一种类似于JavaScript代码片段,AngularJS表达式仅在AngularJS作用 域中运行,不是整个DOM中运行。...通过给定我们数据模型语境, 控制器允许我们建立模型视图之间数据绑定。

    53980

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

    Angular 模块是带有 @NgModule 装饰器函数类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译运行模块代码。...它标记出该模块拥有的组件、指令管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器中添加服务提供商。 具体请参考官方文档。...变更 拆分新增了路由模块 ActivatedRoute:获取路由信息 路由事件实例,如NavigationEnd表示导航事件变更完毕,等 反正改了挺多,请自行查询官方API文档…[捂脸] 新增路由模块.... > System Settings > Use "safe write",参见angular-cli issue#5507 。 8. 无法router里获取RouteParamsAPI。...原因:angular(v4.1.1)中,使用ActivatedRouteAPI获取路由信息。

    8.2K00

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    显然,templateUrl并且styleUrls定义Angular应该哪里获取我们标记CSS。...我们很快会讨论输入组件通信,但现在,我们只需要记住,最好使用常量构造函数,比如实际上被硬编码到组件ngOnInit中东西,以及依赖于外部所有东西数据。...banana,或者ngModel是一个Angular指令,它负责从事件所有那些中获取价值。...反应角 - Ngrx 让我们来谈谈我们应用程序状态,意思是我们应用程序所有属性,它们字面定义其当前行为状态。...你remove action现在可以用同样方法。当我们订阅中获取数据时,您只需要实现该Remove效果。但我会把它留给你。 路由模块 我们来谈谈我们应用程序组合。

    42.6K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    服务器获取英雄数据。 让用户添加,编辑删除英雄名字。 将更改保存到服务器。 您将教会应用程序对远程服务器Web API进行相应HTTP调用。...注册HTTP服务 应用程序可以使用BrowserClient之前,您必须将其注册为服务提供者。 您应该可以应用程序任何位置访问BrowserClient服务。...通过id获取英雄 当HeroDetailComponent要求HeroService获取一个英雄时,HeroService当前获取所有英雄并且过滤器以id匹配一个hero。...URL英雄id标识服务器应该更新哪个英雄。 另外,响应中数据是单个英雄对象不是列表。...当应用程序使用模拟英雄列表时,更新直接应用于单个应用程序范围共享列表中英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。

    11K30

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑压缩、应用程序版本自动刷新和工程构建等内容。...开始时候, _Layout.cshtml 母版页顶部编写了一些服务器端代码。所做头两件事情就是让程序集信息类中获取应用序列号,应用程序设置中获取检索基本 URL。...所有的内容页相关联 JavaScript 文件将会遵循命名约定规则,这个规则允许该应用程序来解析路由并动态地确定每个内容页需要哪些 JavaScript 文件。...下面的示例应用程序路由表只需要分析出三条路线: 一个用于根路径'/' 一个标准路由路径,如'/:section/:tree' 包含路由参数路由,如'/:section/:tree/:id' 决定...5.0 兼容,将大幅提高工作效率;AngularJS 开发时,可以借助 Wijmo 这款为企业应用程序开发推出一系列包含 HTML5 JavaScript 开发控件集,无论应用程序是移动端、

    8.3K100

    【转载】【ionic+angularjs】angularjs ui-router路由简介

    这里简单明了说明下ngRouteui-router区别吧,其实也没很大区别,主要就是ngRoute针对于单视图,ui-router可用于多视图(这里说视图是指在页面内我们可控制,可变化区域...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...data:object,任意对象数据,用于自定义配置。继承父级状态data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。...6.URL路由传参(通过$stateParams服务获取参数) 有url: '/index/:id',url: '/index/{id}',两种形式传参 <div ng-app...ngRoute中resolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项时比使用angular-route有更大自由度。

    7.4K70

    【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

    这里简单明了说明下ngRouteui-router区别吧,其实也没很大区别,主要就是ngRoute针对于单视图,ui-router可用于多视图(这里说视图是指在页面内我们可控制,可变化区域...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...data:object,任意对象数据,用于自定义配置。继承父级状态data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。...6.URL路由传参(通过$stateParams服务获取参数) 有url: '/index/:id',url: '/index/{id}',两种形式传参 <div ng-app...ngRoute中resolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项时比使用angular-route有更大自由度。

    7.3K40

    2020vue面试题及答案_人际关系面试题及答案

    需要后台配置支持, 如果输入一个并不存在url, 需要后端配置做 “兜底配置”, 不是粗暴返回404, 而是返回首页 23、Vue与Angular以及React区别?...维护,初始发行于 2013年3月;Vue是由前google人员创建,初始发行于2014年2月 2.应用类型不同:Angular支持开发native应用程序、SPA单页应用程序、混合应用程序web应用程序...框架库:Angular 是一个框架不是一个库,因为它提供了关于如何构建应用程序强有力约束,并且还提供了更多开箱即用功能。React Vue 是是一种库,可以各种包搭配。 8....优点:轻量级框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据结构分离、运行速度快、插件化 缺点:不支持ie8以下、社区没有angularreact丰富、缺乏高阶教程和文档...38、如何获取dom 我们vue项⽬中,难免会因为引⽤第三⽅库⽽需要操作DOM标签,vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。

    8.7K20

    【19】进大厂必须掌握面试题-50个React面试

    语法以下方面ES5更改为ES6: 10. React与Angular有何不同?...但是语法上存在一些差异,例如: 事件使用驼峰式大小写不是仅使用小写字母命名。 事件是作为函数不是字符串传递。 事件参数包含一组特定于事件属性。...它们通过回收DOM中所有现有元素来帮助React优化渲染。这些键必须是唯一数字或字符串,React只能使用这些数字或字符串对元素进行重新排序,不是重新渲染它们。这导致应用程序性能提高。...React Router是一个强大路由库,建立React基础上,可以帮助向应用程序添加新屏幕流程。这样可以使URL与网页上显示数据保持同步。...路由器用于定义多个路由,并且当用户键入特定URL时,如果此URL路由器内部定义任何“路由路径匹配,则用户将被重定向到该特定路由

    11.2K30

    JSON Web Token(JWT)教程:一个基于LaravelAngularJS例子

    基于token认证是无状态,因此不需要在会话中存储用户信息。这使我们能够扩展我们应用程序不必担心用户登录位置。我们可以轻松地使用相同token除了我们登录域之外域中获取安全资源。...如果我们使用负载均衡配置,我们可以将用户传递给任何服务器,不是仅被绑定在我们登陆那台服务器上。...) 本教程中,将演示如何使用两个流行Web技术实现JSON Web Token基本身份验证:Laravel 5用于后端代码,AngularJS用于前端单页面应用程序(SPA)示例。...HTTP请求 为了简洁起见,将把所有的代码放在route.php文件中,该文件负责Laravel路由委托请求给控制器。...HomeController处理登录,注册注销功能。它将用户名密码数据登录表单注册表单传递Auth到向后端发送HTTP请求服务。

    30.6K10

    Angular SSR 探究

    Angular Universal 是 服务端 进行渲染(Server-Side Rendering,SSR),生成静态应用程序网页,然后客户端展示,好处是可以更快地进行渲染,提供完整交互之前就可以为用户提供内容展示...例如,浏览器中,我们通过 window.location.href 获取当前浏览器地址,改成 SSR 之后,代码如下:import { Location } from '@angular/common...这是因为 Angular 使用了动态路由,比如 /product/:id 这种路由页面的渲染结果要经过 JS 执行才能知道,因此,Angular 使用了 Express 作为 Web 服务器,能在服务端运行时根据用户请求... Angular 14 中,如果路由界面通过 Routes 配置,可以将网页静态 title 直接写在路由配置中:{ path: 'home', component: AbmHomeComponent...Angular Universal 主要关注将 Angular App 如何进行服务端渲染生成静态 HTML,对于用户交互复杂 SPA 并不推荐使用 SSR。

    10.3K51

    【17】进大厂必须掌握面试题-50个Angular面试

    顾名思义,它们控制数据如何服务器流到HTML UI。 10. Angular范围是什么? Angular范围是一个引用应用程序模型对象。它是表达式执行上下文。...Angular中,数据绑定是最强大,最重要功能之一,可让您定义组件与DOM(文档对象模型)之间通信。它从根本上简化了定义交互式应用程序过程,不必担心视图或模板与组件之间推送提取数据。...28.什么是Angular依赖注入? 依赖注入(DI)是一种软件设计模式,其中对象作为依赖关系传递,不是组件中对其进行硬编码。...高级水平–面试问题 46.Angular中,描述如何设置,获取清除cookie?...如果您数据模型是”区域”之外更新,请说明该过程,您将如何查看视图?

    41.4K51

    达观数据对AngularJS技术思考与实践

    一、Angular MVC模型: MVC作为web应用程序一种优秀设计模式,由model,veiw,controller三部分组成,它隔离了应用逻辑用户界面层支持关注点分离,所以常受欢迎。...Model负责管理应用程序数据。它响应来自视图请求,同时也响应指令控制器进行自我更新。Veiw即视图,它以一种特定格式或者说样式来显示数据。...理解$scope类似于种子或者桥梁角色,使controller可以获取数据模型信息。 ?...目前单页面应用越来越受欢迎,Angular构建单页面应用上简直是标配。这样构建单页面应用特点是单页、无刷新式页面变化,每个页面包含不同数据。...这样一来,自控制器将会通过它作用域原型来获取父作用域中所有方法。 ?

    5.4K150

    用VSCode开发一个基于asp.net core 2.0sql server linux(docker)ng5bs4项目(2)

    执行成功后, 可以看到表字段约束已经添加成功了: ? 为数据库添加种子数据. 添加种子数据方法有很多, 可以写一个方法然后Startup里面调用....安装成功后, Startup.cs里面注册AutoMapper: ? 此外, AutoMapper还需要知道Domain ModelViewModel对应关系方向....ts代码时, 由于安装了angular插件, 所以智能提示自动补全自动引用都是相当好....可以angularserviceurl写成完整地址, 但是, 由于开发时生产时api地址很有可能不一样, 那么这就意味着发布到正式环境之前要把所有servicesurl地址全部修改一遍,...一直使用vscode编写前台python等, 现在也习惯使用vscode编写.net core项目了, Awesome. 今天先写到这, 下一篇是CRUD部分.

    2.4K50

    Angular vs React 最全面深入对比

    严格说来,AngularReact比较是不公平,因为Angular是一个功能丰富框架,React是一个UI组件库,所以我们接下来分析中会将一些经常React在一起使用类库放在一起讨论...负责构建应用程序所有脚本,启动开发服务器运行测试都会在node_modules中隐藏。您也可以开发过程中使用它来生成新代码。这使得新项目的设置变得轻而易举。...不像Redux那样将状态保存在一个不可变存储中,它鼓励您仅存储最低限度必需状态,并从其中获取剩余数据。它提供了一组装饰器来定义可观察观察者,并将反应逻辑引入到你状态管理代码中。...当然,答案取决于广泛因素,例如您以前经验对相关概念模式普遍了解。如果我们假设你已经知道ES6 +,构建工具所有这些,我们来看看你还需要了解什么。...项目发开过程中,你还可以借助一些支持AngularReact开发工具来提高开发效率,如Wijmo,这是一款为企业应用程序开发推出一系列包含 HTML5 JavaScript 开发控件集。

    3.8K70

    8分钟为你详解React、Angular、Vue三大框架

    这些自定义属性也可以传递给组件,所有的属性都会被组件作为props接收。 JavaScript表达式 JavaScript表达式(但不是语句)可以JSX内部通过大括号{}使用。 ?...例如,Facebook有动态图表,可以渲染到标签,NetflixPayPal使用通用加载,服务器客户端上渲染相同HTML。...它可能包含如下数据: 用户ID, 目标用户ID, 以及USER_FOLLOWED_ANOTHER_USER枚举类型。 存储仓库,是一个数据模型,可以根据调度器接收到数据动作来改变自己。...支持Angular Universal,可以服务器上运行Angular应用程序。 版本9 Angular 9已于2020年2月6日发布。第9版默认情况下使用Ivy编译器。...为了解决这个问题,许多客户端路由器用 "hashbang"(#!)来划分动态URL,例如page.com/#!/。然而,HTML5中,大多数现代浏览器都支持不使用hashbang路由

    22.1K20
    领券