二、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 ...
随机推荐
- 如何上传大文件到github上
真的是被百度坑怕了,只适合我自己的 如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here,Git Bash Here,这里我们选择Git Bash Here,进入如下界面 ...
- 如何在centos6和centos7上部署nfs共享服务器和客户端
nfs共享服务为中小型企业在存储上提供了有效的节省空间,许多大型的网站也在使用nfs,如百度和阿里等,下面结合自己所学的知识,阐述如何在centos6和centos7下配置nfs.注:除了必要的说明外 ...
- 2019 360杯 re wp--Here are some big nums
测试文件:https://www.lanzous.com/i7303oh 1.准备 获取信息: 32位文件 2.IDA打开 找到主函数之后,反编译为伪C代码 int sub_404D70() { in ...
- luogu P5340 [TJOI2019]大中锋的游乐场
传送门 要求经过路径汉堡的点和可乐的点个数之差绝对值\(\le k\),所以可以考虑dp,\(f_{i,j}\)表示到点\(i\),汉堡的点个数减可乐的点的个数为\(j\)的最短距离,注意一下负下标处 ...
- 常用的前端框架Angular、React、Vue
VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...
- 常用技术blog
淘宝核心系统团队 http://csrd.aliapp.com/ 淘宝搜索技术博客 http://www.searchtb.com 淘宝量子恒道官方博客 http://blog.linezing.co ...
- 17.Linux-CentOS系统OpenStack-Keystone同步数据库时报错
问题描述:在同步Keystone数据库时报以下错误[root@controller ~]# su -s /bin/sh -c "keystone-manage db_sync" k ...
- Linux架构之Nginx 七层负载均衡
第50章 Nginx七层负载均衡 一.Nginx负载均衡基本概述 1)为什么要使用负载均衡 当我们的Web服务器直接面向用户,往往要承载大量并发请求,单台服务器难以负荷.使用多台Web服务器组成集群, ...
- JavaScript设计模式样例四 —— 单例模式
单例模式(Singleton Pattern): 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 目的:阻止其他对象实例化其自己的单例对象的副本,从而确保所有对象都访问唯一实例. 场景: ...
- Linux下Centos7对外开放端口
转载:https://blog.csdn.net/realjh/article/details/82048492 命令集合: ()查看对外开放的端口状态 查询已开放的端口 netstat -anp 查 ...