二、angular7的基础知识学习
<p>
hello works
</p>
<div *ngIf="isShow">我是测试内容</div>
<p>
<input type="button" (click)="isShow=!isShow" value="显示和隐藏"/>
</p>
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
<!--双向数据绑定-->
<p>
请输入用户名:<input type="text" value="" [(ngModel)]="username"/>
</p>
<h3>你的用户名是:{{username}}</h3>
<!--调用服务-->
<p>
<input type="button" (click)="show()" value="调用服务"/>
</p>
<hr/>
angular创建组件命令:
ng g component pubcoms/head;
pubcoms为目录,head为创建文件和head目录。
angular创建服务:
ng g services services/myservices;
services为目录,myservices为创建service文件。
创建之后在app.module.ts文件中配置:
加入:import {MyservicesService} from './services/myservices.service';
MyservicesService必须跟创建服务后中的myservices.service.ts文件中的类名一致(export class MyservicesService{}).
并在文件中的providers:[{.....},'MyservicesService']中声明,在需要用到服务的模块中声明服务:
比如在head中需要:在head头部引用,需要在head.component.ts中加入:import {MyservicesService} from '../../services/myservices.service';
并在构造函数中声明:
constructor(private myservice:MyservicesService){};
引用http模块:
在head加载时引用,在head.component.ts头部加入:import {Http} from 'angular@http';
并在构造函数中声明:
constructor(private myservice:MyservicesService,private http:Http){};
还需要在app.module.ts头部中添加引用:
import {HttpModule} from '@angular@http';
在下面的imports中加入:
imports:[
BrowserModule,
AppRoutingModule,
NgZorroAntdModule,
FormsModule,
HttpModule,
HttpClientModule,
BrowserAnimationsModule
]
在head加载时调用该http请求:
//页面加载时请求
ngOnInit() {
const remoteUrl='http://route.showapi.com/341-1?showapi_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2';
this.http.get(remoteUrl).subscribe((data)=>{
console.log(data);
})
}
import { Component, OnInit } from '@angular/core';
//引用http模块
import { Http } from '@angular/http'; //引用服务
import { MyservicesService } from '../../services/myservices.service'; @Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.less']
})
export class HeadComponent implements OnInit {
public isShow=true;
public items=['你好','我好','大家好'];
public username="廖某某";
//声明服务
constructor(private myservice:MyservicesService,private http:Http) { }
//页面加载时请求
ngOnInit() {
const remoteUrl='http://route.showapi.com/341-1?showapi_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2';
this.http.get(remoteUrl).subscribe((data)=>{
console.log(data);
})
}
show() {
this.myservice.showMSG();
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule} from '@angular/http'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { BannerComponent } from './pubcoms/banner/banner.component';
import { HeadComponent } from './pubcoms/head/head.component';
import { FootComponent } from './pubcoms/foot/foot.component';
import {MyservicesService} from './services/myservices.service'; registerLocaleData(en); @NgModule({
declarations: [
AppComponent,
BannerComponent,
HeadComponent,
FootComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgZorroAntdModule,
FormsModule,
HttpModule,
HttpClientModule,
BrowserAnimationsModule
],
providers: [{ provide: NZ_I18N, useValue: en_US },MyservicesService],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core'; @Injectable({
providedIn: 'root'
})
export class MyservicesService { constructor() { } showMSG(){
console.log("调用服务方法");
}
}
二、angular7的基础知识学习的更多相关文章
- 【转载】salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句
salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句 salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex ...
- GCC基础知识学习
GCC基础知识学习 一.GCC编译选项解析 常用编译选项 命令格式:gcc [选项] [文件名] -E:仅执行编译预处理: -S:将C代码转换为汇编代码: -c:仅执行编译操作,不进行连接操作: -o ...
- (转)Linux基础知识学习
Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...
- Objective-c基础知识学习笔记
Objective-c基础知识学习笔记(一) 一直有记录笔记的习惯.但非常久没分享一些东西了,正好上半年開始学习IOS了,如今有空写点.因开发须要,公司特意为我们配置了几台新MAC.还让我们自学了2周 ...
- Vue2基础知识学习
Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...
- AXAJ基础知识学习
AXAJ基础知识学习 博客首页 Ajax简介 ajxa全称是Asynchronous Javascript And XML ,就是异步的JS 和XML 通过Ajax可以再浏览器中向服务器发送异步请求, ...
- elastic search&logstash&kibana 学习历程(二)es基础知识
简介:es的index索引,document文档对象,副本,多节点集群等基础知识 1.通俗的解释: 在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中 ...
- 韩天峰博客 php基础知识学习记录
http://rango.swoole.com 写好PHP代码真的不容易,给大家几个建议: 慎用全局变量,全局变量不好管理的,会导致你的代码依赖于全局变量,而耦合度太高. 一定不要复制粘贴代码,可重用 ...
- Linq的简介和基础知识学习
学习LINQ之前,我们要知道LINQ是干什么,解决什么问题的,怎样学习? 一.LINQ简介 1.什么是LINQ? 什么是LINQ?LINQ中文翻译为语言集成查询(Language Integrated ...
随机推荐
- kafka学习(二)
创建kafka生产者 要往kafka写入消息,首先要创建一个生产者对象,并设置一些熟悉.kafka生产者有3个必选的属性. 1.bootstrap.servers 该属性指定broker的地址清单 ...
- PHP5和PHP7引用对比(笔记)
php5在引入引用计数后,使用了refcount_gc来记录次数,同时使用is_ref_gc来记录是否是引用类型. 例如 $a = 'hello'; //$a->zval1(type=IS_ST ...
- EML文件(MIME邮件)格式分析
电子邮件普遍遵循的邮件技术规范.MIME邮件由邮件头和邮件体两部分组成.邮件头包括:标题,送信人,收信人,创建日期,邮件体内容类型和邮件体编码方式等内容.邮件体包括:正文,超文本,内嵌数据和附件等内容 ...
- Java 多线程编程之:notify 和 wait 用法
wait 和 notify 简介 wait 和 notify 均为 Object 的方法: Object.wait() —— 暂停一个线程 Object.notify() —— 唤醒一个线程 从以上的 ...
- re库的使用
re库的使用 精确匹配 如果直接给出字符,就是精确匹配.用\d可以匹配一个数字,\w可以匹配一个字母或数字 s1='00\d'#可以匹配'007',但是匹配不了'00A' s2='\d\d\d'#可以 ...
- 图——图的Floyd法最短路径实现
1,Dijkstra 算法一次性求得起始顶点到所有其它顶点的最短路径,如果想要求解任意两个顶点之间的最短路径,可将图中顶点作为起始顶点执行 n 次 Dijkstra 算法就可以了: 2,可能解决方案: ...
- 洛谷 P1631 序列合并(优先队列)
传送门 解题思路 首先读入a.b数组后,sort一遍(从小到大),然后把a[1]+b[1],a[2]+b[1],a[3]+b[1]……a[n]+b[1]全部加入一个优先队列q(小根堆). 然后从一到n ...
- pistat 查看进程状态
该pidstat命令用于监视当前正在由Linux内核管理的各个任务.对于使用选项-p选择的每个任务,或者如果使用了选项-p ALL,则它将写入Linux内核管理的 每个任务的标准输出活动.不选择任何任 ...
- python3使用hashlib进行加密
hashlib是个专门提供hash算法的库,里面包括md5, sha1, sha224, sha256, sha384, sha512,使用非常简单.方便. MD5 MD5的全称是Message-Di ...
- vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...