angular6之深度
文章平均质量分 69
西红柿天尊
精通android,ios,java开发。
展开
-
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
第一步准备好api接口地址, 例如 https://api.example.com/api/第二步在根组件 app.components.ts 中引入 HttpClientModule 模块。? 1 2 3 4 5 6 7 // app.components.ts import {HttpCli...原创 2018-10-15 19:05:23 · 6123 阅读 · 1 评论 -
Angular6学习笔记7: 主从组件
主从组件继学习笔记6,现在可以在页面上显示一个数组,但是原则上不能将所有特性放在同一个组件中,因为如果将所有特性放在同一个组件中,当特性特别多时,组件就变得不好维护了。所以要将大型组件拆分为多个小型组件,使每一个小型组件集中处理某一个特性任务或者工作流,而且这样也便于维护。这次要将学习笔记6中的查看hero详情,放置在一个新的,独立,可复用的组件中,集中在新的组件管理和维护hero详情的信...原创 2018-10-10 10:04:37 · 319 阅读 · 0 评论 -
Angular6学习笔记8: 服务(Service)(1)
服务(Service)继学习笔记7,可以使用主从组件,现在继续学习(服务)Service;问题:为什么需要服务?因为:组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。这次将创建一个 HeroService,应用中的所有类都可以使用它来获取英雄列表。 不要使用 new 来创建此服务,而要依靠 Angular 的...原创 2018-10-10 10:06:08 · 554 阅读 · 0 评论 -
Angular学习笔记9:服务(Service)(2)
可观察的对象(observable)的数据在现在的是情况下:HeroService.getHeroes() 的函数签名是同步的,它所隐含的假设是 HeroService 总是能同步获取英雄列表数据。 而 HeroesComponent 也同样假设能同步取到 getHeroes() 的结果。但是在实际的项目中,这种情况几乎是不可能实现的,因为,在实际的项目中,这些数据是来源于远端的服务器上,而这...原创 2018-10-10 10:07:26 · 357 阅读 · 0 评论 -
Angular学习笔记10:路由
在工作或者学习中,有时候会遇到如下需求:在一个页面上写一个导航,导航栏中的每一个选项都对应一个页面。就如Angular官方文档中:(图片来自于Angular官方文档) 添加一个仪表盘视图。 在Heroes和DashBoard视图之间导航。 无论在哪个视图中点击一个英雄,都会导航到这个Hero的详情页。 在邮件中点击一个深链接,会直接打开一个特定英雄的...原创 2018-10-10 10:08:56 · 352 阅读 · 0 评论 -
Angular学习笔记11:HTTP(1)
HTTP继学习笔记10后,可以在路由器中配置相关路由使用户可在不同的视图切换。在一个实际的项目中,数据使来自远端的服务器上的,在Angular中,Angular通过HttpClient与远端服务器进行通讯。模拟数据服务器使用 内存 Web API(In-memory Web API) 模拟出的远程数据服务器通讯(在实际项目中不使用这个模块,在这里只是模拟后端数据)。a. 安装i...原创 2018-10-10 10:10:05 · 500 阅读 · 0 评论 -
Angular6学习笔记12:HTTP(2)
HTTP继学习笔记11以后,可以模拟的调用get方法,并且可以利用某一个ID去查询某一个Hero的详细信息。1.修改Hero的信息当需要修改某一个hero的名字的时候,当点击后退的时候,之前的所做的改变的信息都会小时不在,在实际应用中,这些修改都应该是被保存的,需要将修改后的信息,传输给远端的服务器,进而的正真的修改这条数据。在hero-detail的模版文件中,增加一个save按...原创 2018-10-10 10:11:13 · 416 阅读 · 0 评论 -
Angular6学习笔记13:HTTP(3
HTTP继学习笔记12以后,可以模拟向后端发送get/post/put/delete请求了。在项目中,有一个table,这个table的数据非常多,就好比现在的heroList,需要根据用户输入的信息发送给远端服务器,让远端服务器通过这个信息,返回搜索结果。现在要检索heroList中的信息,就需要一个输入框,让用户输入检索的值,然后将这个值发送给远端服务器(模拟),然后让远端服务器(模拟)返...原创 2018-10-10 10:12:26 · 240 阅读 · 0 评论 -
Angular6学习笔记14:核心知识--架构--angular架构预览
架构预览:模块 Modules / 组件 Components / 服务与依赖注入 Services and dependency injection / 路由 Routing总览:Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行...原创 2018-10-10 10:13:52 · 406 阅读 · 0 评论 -
Angular学习笔记6: 在页面中显示列表(*ngFor/*ngIf)
页面中显示列表(*ngFor/*ngIf指令的使用)继学习笔记5以后,可以将一个Object对象显示在模版文件中(html)真正在项目中,数据是来自后端服务器返回的,此时先创建一些模拟的数据。1.创建模拟的数据在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。 wjydeMacBook-Pro:app wjy$ ng generate...原创 2018-09-30 11:53:28 · 1819 阅读 · 0 评论 -
Angular6学习笔记5:修改组件的属性并实时显示(ngModel)
修改组件的属性并实时显示(ngModel)继学习笔记4以后,可以在一个AppComponent中显示了heroesComponent的属性信息,但是hero的Name往往是可以更改的,并将更改后的数据进行实时显示。1.将hero的Name重构 <div> <label>name: <input [(ngModel)]="he...原创 2018-09-30 11:52:03 · 1951 阅读 · 0 评论 -
Angular6学习笔记4:创建一个新的Angular组件,并将它展示出来
创建一个新的Angular组件,并将它展示出来继学习笔记3以后,创建的应用程序有了标题,现在要创建一个新的组件来显示hero的信息,并将它们展示出来。1.新建一个新的Angular组件在命令行中(注意要切换都项目路径下,如使用Webstorm在下方的Terminal中直接输入命令即可)使用 Angular CLI 创建一个名为 heroes 的新组件。ng generate co...原创 2018-09-30 11:49:44 · 696 阅读 · 0 评论 -
Angular6笔记之封装http的示例代码
最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块。之前使用的ajax库是axios,可以设置baseurl,公共头部;集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpIntercepto...原创 2018-10-15 19:09:33 · 610 阅读 · 0 评论 -
浅谈Angular6的服务和依赖注入
在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作.先解释两个概念:Providers(提供商):是个比较抽象的名词,我们把它想象为'图纸'更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类. Injecto...原创 2018-10-15 19:11:17 · 468 阅读 · 0 评论 -
详解Angular6.0使用路由步骤(共7步)
今天写的有点儿多了,前几天一直写js基础.今天想聊聊angular6.0的路由实现.因为有公司已经开始转向angular6.0了.写完赶紧吃饭去了.声明一下,以下路由的实现是基于angular6.0 脚手架 实现的. 脚手架的安装方法不在此讨论范围内.第一步:创建一个路由文件.通过指令ng g module 模块名称;来创建一个路由模块文件;第二步: 在app.componen...原创 2018-10-15 19:12:06 · 409 阅读 · 0 评论 -
Angular4基本网络请求get、post方式
angular2的网络请求和4还是有很大区别的,写一个项目的话肯定会用到http服务,除非你都是静态页,这只是一个最基本的、深入的拓展即可,希望能够帮助大家吧,谢谢首先如果你想用这个服务、那么你需要在app.module.ts中引入如下:imports: [ BrowserModule, HttpModule, RouterModule.forRoot(routes...原创 2018-10-15 19:14:21 · 899 阅读 · 0 评论 -
初探Angular6.x---用户列表与用户详情
在上一篇博文《Angular6.x---进入用户编辑》中,我们分享了{{属性名称}}和[(ngModel)]这两个表达式的运用,我们已经可以将表单里的修改与我们展示出来的值进行同步,今天我们来学习在Angular6.x中如何展示一个列表.在项目里,列表展示可以说是非常普遍的一个需求了,几乎有展示数据需求的地方都需要一个列表展示与一个详情展示.当然我们的数据一般都是从服务器端获取的,而今天呢,为了...转载 2018-10-15 19:15:08 · 546 阅读 · 0 评论 -
初探Angular6.x---主从组件
在上一篇博文《Angular6.x---用户列表与详情展示》中,我们用*ngFor=”let object of list”实现了用户列表的展示,并通过(click)=”onSelect(obj)”语法实现了列表单击时将单击的对象传到后台的功能,最后为了防止初次加载对象为空导致的错误,我们又使用了*ngIf语法来对要展示的详情对象进行判空操作.但随着后续模块的增多,以及业务的交叉,我们发现这样的代...原创 2018-10-15 19:15:59 · 135 阅读 · 0 评论 -
Angular6学习笔记1:搭建开发环境
搭建angular开发环境 a.安装node.js 下载地址:https://nodejs.org/en/download/ 确认安装结果 :打开cmd或者terminal Last login: Thu Aug 2 13:48:04 on ttys000 bogon:~ wjy$ node -v v8.9.1 bogon:~ wjy...原创 2018-09-27 18:00:36 · 334 阅读 · 0 评论 -
Angular6学习笔记2: 启动应用
在Angular4学习笔记1中,创建了一个Demo的Project,现在要启动它一.在命令行中启动1.切换到项目目录下:cd demo2.启动这个应用:ng server --open--open : 在启动后自动打开浏览器,当然也可以不加,不过在启动完成后要手动的在浏览器中输入:http://localhost:4200/启动完成后,会出现如下内容 此时说...原创 2018-09-29 15:50:50 · 462 阅读 · 0 评论 -
Angular6学习笔记3:修改Angular组件:app.component
Angular组件继学习笔记2后,启动应用。浏览器出现如下界面:这个是由一个名称是 “AppComponent” 的 Angular 组件控制的。关于组件:组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。打开项目的目录:src/app , 可以看到AppComponent实现的三个文件: app.compo...原创 2018-09-29 15:51:51 · 1022 阅读 · 0 评论 -
Angular6学习笔记15:核心知识-模块(NgModule)
模块(NgModule)继学习笔记14,可以大概的知道Angular的大概架构,现在在一一深入了解。Angular的应用,会将整个应用进行模块化处理,即:将一个应用分成几个模块,一个应用,至少有一个模块(AppModule-根模块),简答的讲,一个模块,就是一个容器,存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代...原创 2018-10-10 10:14:42 · 674 阅读 · 0 评论