Angular学习笔记（第四天）

一、Ionic的使用

1.概述：

Ionic是基于angular的移动端的ui组件库：

（在后续的升级版本中，也在支持以cdn的方式，支持vue、react、js，但是这个新版本手册不够友好，还有些问题）

    ionic = angular+ionicModule+cordova+icons

推荐一些angular建议的ui组件库:
  Material:https://material.angular.cn
  NgZorro:https://ng.ant.design/docs/introduce/zh
  Ionic:定位于移动端的ui

 移动端的3种常见的开发形式:
  ①WebApp: 运行在手机浏览器，采用web前端技术来实现的网页;跨平台
   举例:手机端的京东、淘宝
  
  ②NativeApp: 运行在手机OS(Operating System)，  采用android中的java/kotlin,采用iOS中的   oc/swift,调用Google/Apple所提供的SDK(software development kit)中的控件来完成app的开发；性能
   reactNative(rn) 

  ③HybridApp: 运行在手机OS(Operating System)

    phonegap/AppCan/Dcloud/369Cloud/Flutter/....

 原因：
    ionic有着非常多的组件支持
    ionic有着强大的cli支持
    ionic基于angular，有着非常多的受众
    。。。
  应用场景：
    使用ionic实现webApp，也可以实现hybridApp

确认ionic是否可用：1.检查ionic的版本，2.环境变量设置（安装ionic的nomodule/bin目录）

2、ionic的基础用法

2.1 创建自己的page
    得是在基于ionic所创建的工程中:
      ionic g page demo01
    到根模块中声明:
      app.module.ts
      import {Demo01Page} from '../pages/demo01/demo1'
      @NgModule({
        declarations:[Demo01Page],
    entryComponents:[Demo01Page]
      })

   2.2 调用page
     支持很多中调用的方案:
     比如:
      app.component.ts
      import {Demo01Page} from '../pages/demo01/demo01'

      rootPage:any = Demo01Page

   注意：
     当前ionic的cli工具有个小问题：
     第一次修改一个page的html，有可能不会及时的更新；试着将开发服务器重启

3、ionic的基础组件
  3.1 button
    ion-button
    color 颜色（蓝色primary 绿色secondary 红色danger 浅灰色light 黑色dark）
    (src/theme/variables.scss 修改$colors颜色设置 是很灵活的)
    small/large 小/大
    round 圆角
    outline 边框
    clear 只保留按钮内的内容
    block 块级显示

  3.2 list
     item-start/item-end
    普通列表
     <ion-list>
       <ion-item></ion-item>
     </ion-list>
    
    icon列表
     <ion-icon></ion-icon>
    
    头像列表(联系人)
     <ion-avatar></ion-avatar>
    
    缩略图列表
     <ion-thumbnail></ion-thumbnail>

    下拉刷新
      ①标签要写在ionContent的第一个子元素位置
       <ion-refresher></ion-refresher>
      ②绑定事件
       <ion-refresher (ionRefresh)="handleRefresh($event)"></ion-refresher>
      ③手工的通知ionRefresher可以结束刷新动作的
        handleRefresh(myRefresher){
      //数据操作
      //结束刷新动作
      myRefresher.complete()    
    }      
    
    上拉加载更多
      ①标签要写在ionContent的最后一个子元素的位置
       <ion-infinite-scroll>
         <ion-infinite-scroll-content loadingText="">
         </ion-infinite-scroll-content>
       </ion-infinite-scroll>
      ②绑定事件
        <ion-infinite-scroll (ionInfinite)="loadMore($event)">
        </ion-infinite-scroll>       
      ③在事件处理函数中 处理数据 并结束加载更多的动画的效果
        loadMore(myInfinite){
      //计算
      myInfinite.complete()
    }
  

 3.3 slides 轮播图
   基础用法:
    <ion-slides>
      <ion-slide></ion-slide>
    </ion-slides>
   常见的属性:
   autoplay loop pager paginationType="bullets/fraction/progress"
   effect='fade/cube/flip/slides' 
   speed=2000(用来指定动画持续的时间)
   
   坑：
    自动播放时，如果没有轮播图可以轮播是会报错的

  3.4 ionGrid 自定义布局
   ionic中自带的栅格系统 是基于前端的flexbox来实现，可以帮助非常方便的来实现自定义布局

   基础用法:
    <ion-grid>
      <ion-row>
       <ion-col></ion-col>
      </ion-row>
    </ion-grid>
   
   支持的常见属性:
     align-items-start/center/end
      行中设置列内容的纵向对齐：
      <ion-row align-items-center></ion-row>
     
     align-self-start/center/end
      某一列的纵向对齐:
      <ion-col align-self-center></ion-col>
     
     justify-content-start/center/end
      行中列的横向对齐处理
      <ion-row justify-content-center>
      </ion-row>

      某一列内容的横向对齐 依然可以使用text-align来设置
     
     指定列宽:col-*
     指定偏移量: offset-*
     将某一个向右推、左拉：push-* pull-*

3.5 ionScroll 支持滚动容器
   ionScroll是一个容器，可以配置为支持横向滚动、纵向滚动
    <ion-scroll style="height:200px" scrollX scrollY></ion-scroll>

  3.6 card
   卡片只是为了更好的展示信息给用户
    <ion-card>
      <ion-card-header></ion-card-header>
      <ion-card-content>
        <ion-card-title></ion-card-title>
      </ion-card-content>
    </ion-card>

  3.8 各种交互窗口
  
  
   toast(以通知的形式 告诉用户一个操作的结果)
     create({
       message:"",
       duration:2000,
       position:'top/middle/bottom'
     })
   
   actionSheet (让用户从多个选项中做选择的)
    create({
      title:'',
      buttons:[
        {text:'朋友圈',handler:()=>{},role:'cancel/destructive'}
      ]
    })
   
   loading (LoadingController 加载中的窗口)
     create({
       content:'正在刷新...',
       duration:2000
     })
   
   alert(AlertController 警告、确认、输入提示)

   modal 模态窗口(自定义交互效果)
    注意：和之前虽然使用套路一致，但是create方法要注意，得把第一个参数指定为组件类

    进阶:如果通过模态窗展示了一个页面，怎么关闭?? 
     借助于ViewController来关闭模态窗口
     import {ViewController} from 'ionic-angular'

     constructor(private viewCtrl:ViewController){}

     this.viewCtrl.dismiss()

   套路:
    ①引入类
     LoadingController
    ②实例化
     constructor(private loadingCtrl:LoadingController){}
    ③创建窗口
     var myLoading = this.loadingCtrl.create()
    ④显示窗口
     myLoading.present()

3.9 表单
   ionic中表单是靠ionList和ionItem来处理
   <ion-list>
     <ion-item>
       ion-label
       ion-input
       ion-checkbox
       ion-radio
       ion-select  ion-option
       ion-range
       ion-toggle
       ...
     </ion-item>
   </ion-list>
   
   注意事项:
    如果有多个radio,加了radio-group

  3.10 导航、传参
   ionic已经将angular集成到模板项目了，但是并没有采用angular官方的路由处理，提供了一种更简洁的方案

    导航:
     方案1：编程式导航
      import { Demo12DetailPage } from '../demo12-detail/demo12-detail';     
     
      this.navCtrl.push(Demo12DetailPage)

     方案2: navPush
      import { Demo12DetailPage } from '../demo12-detail/demo12-detail';      
      
      detail = Demo12DetailPage

      <any [navPush]="detail"></any>
    
    传参：
      ①发送
         this.navCtrl
      .push(Demo12DetailPage,{id:10})

     <any [navPush]="detail"
      [navParams]="{id:10}"></any>

      ②接收
         this.navParams.get('id')

 3.11 tabs
    tabs是在移动端经常用到的组件：工具条、导航条、选项卡
    
    使用原则：给每一个tab指定要显示的页面

    <ion-tabs>
     <ion-tab tabIcon="" tabTitle="" root=""></ion-tab>
     <ion-tab ></ion-tab>
     <ion-tab></ion-tab>
    </ion-tabs>

    具体:
     ①创建各个页面（每一个tab在按下时要显示的页面）
     ②引入对应的页面类，保存在类的内部成员变量
     ③调用ionTabs，设置每一个tab的root、tabTitle、tabIcon