关于angular:复宏汉霖Angular-Ionic-TS

背景: 新接手复宏汉霖我的项目,记一下须要后期相熟的货色,不便前期保护.首次开始Angular+ionic我的项目.给本人打气!加油!文章有点长,须要急躁看~~

先放张图片,安抚一下眼睛.

打包地址的地位:

两个都要替换对应的地址再进行打包.ios打包须要苹果电脑.

先相熟一个简略的集体设置页面:

页面理论图如下:

看一下页面文件夹的目录构造:

setup.html : 页面
setup.scss : css款式
setup.ts : 解决逻辑
setup.module.ts : model层
staff.service.ts : services层

我发现这个我的项目它们是把service都放在一起的.我之前写的其余我的项目是每个文件夹下有本人的service....

来钻研一下`集体设置`这个页面是怎么画进去的:

先钻研下页面实现HTML:

来看下人家的代码是怎么写的:

第一局部发现了<ion-header>`<ion-title>`的标签.从名字看了解就是写title的标签.果然找到了零碎设置四个字.就是页面的头部地位.
第二局部,整体用<ion-content>标签包起来,就是页面的内容

持续往下看,发现了<ion-icon>`<h2>标签用来展现头像和姓名.用<div>`略微调整了下布局.
持续往下看,发现了<ion-list>标签包裹的内容.对照页面看.果然有批改手势明码,对于,客服热线等一个个item.这样的item用list标签是最合适的.没故障.外面就是用一个个div把头像和文字写到一排.而后设置了一个点击办法.
持续往下看,在<ion-list>完结标签前面.写了一个div标签.用来绘制页面底部的登记账号的地位.div里面包个button,加个点击事件就好了.

这样一条条理进去整个页面的布局就清晰可见了.

setup.html内容:

<ion-header>
  <ion-navbar color="sky">
    <ion-title>零碎设置</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="gray-bg">
  <div class="setting-top" padding-top>
    <ion-item tappable (tap)="toProfile()">
      <ion-icon item-start>
        <img src="assets/icon/avatar_duel_126.png" width="50">
      </ion-icon>
      <h2>{{currentStaff?.UserName}}</h2>
      <p></p>
    </ion-item>
  </div>
  <ion-list>
    <button ion-item (click)="changeGestureCode()">
      <ion-icon item-start>
        <img src="assets/icon/pattern_yellow_58.png" width="30">
      </ion-icon>
      <h3>批改手势明码</h3>
    </button>
    <button ion-item (click)="aboutPage()">
      <ion-icon item-start>
        <img src="assets/icon/info_blue_58.png" width="30">
      </ion-icon>
      <h3>对于</h3>
    </button>
    <button ion-item (click)="ToCallNumber()">
      <ion-icon item-start>
        <img src="assets/icon/phone_green_58.png" width="30">
      </ion-icon>
      <h3>客服热线 <span class="color-blue">400-XXX-0800</span></h3>
    </button>
  </ion-list>

  <div padding>
    <button ion-button block color="danger" (click)="logout()">登记账号</button>
  </div>
</ion-content>

钻研完HTML页面后,下一步就要看,点击事件的背地做了什么事件.

先来看下逻辑页面的解决:

顶部引入了页面所需的装璜器.组件.service等内容.
@IonicPage()空装璜器
@Component({ selector: 'page-setup',templateUrl: 'setup.html',}) 公共组件和该组件的 HTML 模板文件.

templateUrl:'setup.html'这个名字很相熟就不多解释了.就是我刚刚剖析的HTML页面的文件名.
selector: 'page-setup'是一个公共组件,能够共用组件内的款式,逻辑,等所有内容.

上面看下SetupPage类外面有哪些货色.

定义页面所需的变量 : currentStaff: any;看名字了解为以后的人员信息,类型为any
定义页面所需的变量 : selectedStaff: any;看名字了解为抉择的人员信息,类型为any
constructor页面初始化的时候注入依赖,依赖外面有一些上面要用到的办法.
toProfile,changePassword等办法的正文介绍的很分明了.是用来做什么的.这里说一下this.navCtrl.push的意思是页面跳转.外面的两个参数:一是跳转的页面路由二是带过来的参数.this.navCtrl就是刚刚注入的NavController依赖,this.navCtrl.push的.push就是NavController外面的办法.
批改手势明码的办法外面用到了一个办法叫做this.modalCtrl.create是用来在页面下层浮现一个model.传参也是两个参数,一个页面路由一个传递的参数.
ionViewDidEnter办法是在constructor之后执行的.相当于在页面初始化之后去获取一些人员信息用来展现.

setup.ts 内容:

import {Component} from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams, Platform} from 'ionic-angular';
import {AlertService} from "../../../providers/util/alert.service";
import {StaffService} from "../../../services/staff.service";
import {JPush} from '@jiguang-ionic/jpush';

@IonicPage()
@Component({
  selector: 'page-setup',
  templateUrl: 'setup.html',
})
export class SetupPage {
  currentStaff: any;
  selectedStaff: any;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public staffService: StaffService,
              public jPush: JPush,
              public platform: Platform,
              public alertService: AlertService,
              public modalCtrl: ModalController) {

  }


  //查看个人信息
  toProfile() {
    this.navCtrl.push('StaffProfilePage', {});
  }

  //批改明码
  changePassword() {
    this.navCtrl.push('ChangePasswordPage', {});
  }

  //对于页面
  aboutPage() {
    this.navCtrl.push('AboutPage', {});
  }
  /***
   * 拨打客服热线
   */
  ToCallNumber = () => {
    document.location.href = "tel:400-xxx-0800"
  };

  /**
   * 批改手势明码
   */
  changeGestureCode = () => {
    let modal = this.modalCtrl.create("GesturePage", {type: "modify", cssClass: 'gesture-modal'});
    modal.present();
  };
  /**
   * 获取以后用户信息
   */
  getStaffInfo = () => this.staffService.GetStaffInfo().then((info) => {
    this.currentStaff = info;
  });


  /**
   * 登记
   */
  logout = () => this.alertService.presentAlertWithCallback("请确认", "是否确认登记").then((status) => {
    if (status) {
      this.navCtrl.setRoot("LoginPage").then(() => {
        this.selectedStaff = null;
        localStorage.clear();
        if (this.platform.is('cordova')) {
          this.jPush.deleteAlias({sequence: 1}); // 登记极光别名
        }
      });
      // 403 后跳到登录
      // this.staffService.GetStaffMobileIndexModel().then(() => this.navCtrl.setRoot("LoginPage"))
    }
  });

  ionViewDidEnter() {
    this.getStaffInfo()
  }

}

setup.scss 内容:

page-setup {
  .scroll-content {
    -webkit-overflow-scrolling: auto;
  }
  .setting-top {
    background: url("../assets/imgs/settings_bg.png") center no-repeat;
    height: 20vh;
    width: 100%;
    background-size: 100% 100%;
    .item-md, .item-ios {
      background-color: transparent;
      ion-icon[item-start] + .item-inner {
        margin-left: 12px;
      }
      &.item-block {
        .item-inner {
          border-bottom: none;
          color: #fff;
          p {
            color: #fff;
          }
        }
      }
    }
  }
  .header-ios .toolbar-background-ios {
    border-color: $color-nav;
  }
}

当初用的办法介绍完了来介绍一下页面的model

@NgModule 是Angular的的根模块,称为元数据.这个外面有逻辑页面须要用到的模块,管道等内容.
imports外面的IonicPageModule.forChild(SetupPage)就是用来连贯你的逻辑(SetupPage)页面.能够往回看.你的setup.ts的类名就是叫SetupPage.

setup.module.ts 内容:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SetupPage } from './setup';
import {SharedModule} from "../../../app/shared.module";

@NgModule({
  declarations: [],
  imports: [
    IonicPageModule.forChild(SetupPage),
    SharedModule
  ],
})
export class SetupPageModule {}

当初看一下最初的service层:

service层就是用来连贯后端接口的返回值的.
在setup.ts逻辑文件的上方能够看到有import {StaffService} from "../../../services/staff.service";的导入.这样导入后就能够用 this.staffService.GetStaffInfo().then((info) => {...});去获取后端返回的以后用户信息.


staff.service.ts 局部办法内容:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from "rxjs";

@Injectable()
export class StaffService {
  constructor(public http: HttpClient) {
  }

 /**
   * 获取以后用户的信息
   * @constructor
   */
  GetStaffInfo = () => new Promise((resolve, reject) =>
    this.http.get('api/Staff/GetCurrentStaffInfo')
      .subscribe(res => {
        resolve(res);
      }, (err) => {
        //reject(err);
      })
  );
  
  ....
  
}

总结

明天意识了一下复宏汉霖我的页面的实现.从html-scss-model-serivce.页面到款式到逻辑到接口返回值简略的理解了一下.大抵晓得了页面是怎么实现的.前期还须要常常光顾官网粗浅理解:
Angular官网
Ionic3官网

关于angular:复宏汉霖Angular-Ionic-TS

打包地址的地位:

先相熟一个简略的集体设置页面:

看一下页面文件夹的目录构造:

来钻研一下`集体设置`这个页面是怎么画进去的:

先钻研下页面实现HTML:

钻研完HTML页面后,下一步就要看,点击事件的背地做了什么事件.

当初用的办法介绍完了来介绍一下页面的model

当初看一下最初的service层:

总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于angular:复宏汉霖Angular-Ionic-TS

打包地址的地位:

先相熟一个简略的集体设置页面:

看一下页面文件夹的目录构造:

来钻研一下集体设置这个页面是怎么画进去的:

先钻研下页面实现HTML:

钻研完HTML页面后,下一步就要看,点击事件的背地做了什么事件.

当初用的办法介绍完了来介绍一下页面的model

当初看一下最初的service层:

总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

来钻研一下`集体设置`这个页面是怎么画进去的:

发表回复取消回复