zoukankan      html  css  js  c++  java
  • 二、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("调用服务方法");
      }
    }
  • 相关阅读:
    [转]对Lucene PhraseQuery的slop的理解
    Best jQuery Plugins of 2010
    15 jQuery Plugins To Create A User Friendly Tooltip
    Lucene:基于Java的全文检索引擎简介
    9 Powerful jQuery File Upload Plugins
    Coding Best Practices Using DateTime in the .NET Framework
    Best Image Croppers ready to use for web developers
    28 jQuery Zoom Plugins Creating Stunning Image Effect
    VS2005 + VSS2005 实现团队开发、源代码管理、版本控制(转)
    禁止状态栏显示超链
  • 原文地址:https://www.cnblogs.com/liao123/p/10888325.html
Copyright © 2011-2022 走看看