angular学习之路-二、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( "调用服务方法" );
  }
} 

 

查看更多关于angular学习之路-二、angular7的基础知识学习的详细内容...