二、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 ...
随机推荐
- 获取fork+exec启动的程序的PID值
问题背景 业务中有个场景需要自动起一个A程序(由于A程序与 sublime_text 启动后遇到的问题有相似之处,后文就用 sublime_text 来替代A程序,当A程序与 sublime_ ...
- redis学习(二)
深入了解redis字符串,列表,散列和有序集合命令,了解发布,订阅命令和其他命令. 一,字符串 1.字符串可以存储3种类型的值 字符串,整数,浮点数 2.运算命令列表 incr : incr ...
- python 并发编程 多进程 目录
python multiprocessing模块 介绍 python 开启进程两种方法 python 并发编程 查看进程的id pid与父进程id ppid python 并发编程 多进程 Proce ...
- P1079Vigenère密码
这是2012年noip提高组的的DAY1T1,我用了一下午的时间,一次性AC^^. 这是一个字符串的模拟题.首先给出了一个密码对应法则,我们发现在同一对角线的明文通过密钥得出来的密文是相同的.根据八皇 ...
- 中标麒麟(linux)mysql配置记录
刚装好mysql时,使用正常,后来再次使用时,连接不成功.(虚拟机中) 配置网络有问题, 1.我将ifcfg-*的两个文件备份后删除了. 2.点击右下角的小电脑,重新新建一个网络连接.把网络接入主机的 ...
- 使用CSDN-markdown编辑器粘贴代码块时崩溃问题解决
原因:代码段换行符失效,所有代码一行显示 解决方法:使用Chrome浏览器即可解决(使用Microsoft Edge会出现此问题) 效果展示: # _*_ coding:utf-8 _*_ impor ...
- 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化
后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...
- html5移动端Meta的设置
强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 1 <meta name="viewport" content=&quo ...
- wpf中文本框只能输入整数
private void txtBarCodeNum_KeyUp(object sender, KeyEventArgs e) { TxtInt(sender as TextBox); } priva ...
- makeinfo - 翻译 Texinfo 文档
SYNOPSIS 总览 makeinfo [OPTION]... TEXINFO-FILE... DESCRIPTION 描述 将 Texinfo 源文档翻译为各种其他格式,默认是可以用 Emacs ...