发表于: 2019-10-31 21:04:59

1 992


今天完成的事:搞清楚路由后面讲了什么,任务6写了一部分

明天要完成的事:完成任务6并在http上下功夫

难题:这个地方需要一些数据我没有,需要一些写到一半的路由链接进行分析,

收获:



<a routerLink="/heroes">Heroes</a>

routerlink路由链接:而且

参数化路由:{ path: 'detail/:id', component: HeroDetailComponent },


<a *ngFor="let hero of heroes" class="col-1-4"    routerLink="/detail/{{hero.id}}">  

<div class="module hero">

这个是通过某个类的某个参数来导航

但是我们犯了一个错误之前不该选择之前的文件继续而应该开辟新的文件用来试验和培养

于是趁着对方配置了路由和网页内容

然后匹配到的内容比较靠自己在这个时候你的代码相当关键                                                                                                                                  

遇到什么情况就看你写的什么玩意了,



另外关于http:

  • HeroService 通过 HTTP 请求获取英雄数据。

  • 用户可以添加、编辑和删除英雄,并通过 HTTP 来保存这些更改。

  • 用户可以根据名字搜索英雄。

(讲述了http的一些作用)


启用 HTTP 服务

HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制。

要让 HttpClient 在应用中随处可用,请

  • 打开根模块 AppModule,

  • 从 @angular/common/http 中导入 HttpClientModule 符号,

  • src/app/app.module.ts 

import { HttpClientModule }    from '@angular/common/http';

把它加入 @NgModule.imports 数组。

(首先启动这个功能,将其输入在路由和ngmodule之中使其输入顶级模块和import数组,然后在安装一个web api)

npm install angular-in-memory-web-api --save

安装

ng generate service InMemoryData

创建一个生成内存数据中的服务

(安装完这个模块之后,应用将会通过 HttpClient 来发起请求和接收响应,而不用在乎实际上是这个内存 Web API 在拦截这些请求、操作一个内存数据库,并且给出仿真的响应。这给本教程带来了极大的便利。你不用被迫先架设一个服务器再来学习 HttpClient。)


这个模块里的一些东西是没有说明的比较模糊很多东西都没说明这个东西也不是很重要,http才需要了解


http不着急我先看一下关于各种事件的使用和功能都实现了在考虑htt

angularjs中$scope是什么意思

Scope(作用域)是angular应用程序中视图(HTML)和控制器(JavaScript)之间的纽带。
也就是说HTML和JavaScript可以通过它来传输、共享数据。Scope是一个对象,有自己的很多的方法和属性,$scope正是创建控制器时传递的Scope对象的一个实例。

延伸知识点:我们知道创建控制器时传递了Scope对象的一个实例,所以一个控制器对应一个Scope对象,在多个控制器之间共享数据怎么办?多个控制器若属于同一个APP,我们可以用$rootScope来实现控制器间的数据共享

Scope 概述

AngularJS 应用组成如下:

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。


(我个人感觉这个东西概念是比较模糊的一个纽带有方法和属性,又是个作用域,这个概念就比较奇怪统合之后囊括的东西很多而且这个东西angularjs就有了说明还比较好用)


  • 通过插值表达式显示组件的属性
  • 通过 NgFor 显示数组型属性
  • 通过 NgIf 实现按条件显示


这个事件绑定完之后,没法使用合适的方法

然后就卡在这个方法上面了后面想获取dom元素在更改他的css属性也失败了,事件是没问题的绑定成功了,但是事件之后的方法有问题

不管是show还是hidden都不行,应该是要用*ngfor或者*ngif去写才行

之后去问了师兄,确实是的,这些方法 确实是没有了,然后对*ngif做了一些分析发现

  1. *ngFor="let hero of heroes"

是判断获得了值以后就发生作用,没有获得值以前不发生作用

NgIf

通过把NgIf指令绑定到一个真值表达式,可以把一个元素及其子元素添加到DOM树上。

*ngIf="currentUser

相反,绑定到一个假值表达式将从DOM树中移除该元素及其子元素。如:

<!-- 因为isActive的值为false,所以User Detail不在DOM树中-->

<user-detail *ngIf="isActive"></user-detail>

通过绑定不同的值来添加和移除该元素和子元素,

这个真值和假值的区别在于这个值是否存在或者说这个值是否引入了

现在是需要先点击在出现,而我看文档内是先选定选定了就有值其实就有点没理解,点击即选定没点击就没选定就有点不太理解,难点在这里。

另外还有一种是判断条件:

*ngIf="fruits.length>2"

只有条件达标时才出现:这个我倒是会做一点:设置变量点击时次数加一在通过正则表达式判断奇数偶数这个正则就是*ngif的判断条件。这有点取巧

我还是先理解了在2种都试一下

文档里的是通过先创建一个类的数据或者说数组,通过这个数组去*ngfor创建,但是这个和我们的一个预期以及语法是不同的我们在左侧的目录是一个组件的目录也可以算是一种数组不过这个还没想好要怎么去实现这个数组

而且这个跟文档里是不一样的是有分层的 





返回列表 返回列表
评论

    分享到