Angular_2.路由、移动端ionic

1 路由

建立映射关系，能更快地实现SPA单页面应用程序

1.1 配置

1）将路由功能单独的封装在一个模块
ng g module route --routing
修改 route.routing.module.ts中forChild–>forRoot
2）根模块依赖于包含路由功能的模块
app.module.ts

 import {RouteRoutingModule} from 'xxx'
 @NgModule({
  imports:[RouteRoutingModule]
 })

1.2 基础用法

容器 router-outlet，相当于vue中的router-view
设置路由字典，路由词典的本质是一个数组，数组由多个路由对象构成，路由对象path/component/children/…)

const routes:Routes = [
 {
  path:'login',
  component:Demo17LoginComponent,
  children:[],
  canActivate:[],
  redirectTo:""
 }
]

需要注意的是，与vue的路由定义不同，Angular中path:’'内的路径不应该添加/；
使用**对所有路由进行匹配

1.3 跳转传参

angular跳转方式：
1）编程式导航：

  import {Router} from '@angular/router'//引入
  constructor(private myRouter:Router){}//实例化，不同实例之间用,隔开
  this.myRouter.navigateByUrl('/login')  //路由跳转

2）RouterLink

angular传参步骤：
1）配置接收方的路由地址
/detail:id
2）发送

 this.myRouter.navigateByUrl('/detail/10')
 this.myRouter.navigateByUrl('/detail/'+this.uName)
 
 
 
 

3）接收

 import {ActivatedRoute} from '@angular/router'
 constructor(private myRoute:ActivatedRoute){}
 this.myRoute.params.subscribe((result)=>{})

1.4 路由嵌套(routerOutlet/children)

1）给组件模板内部指定容器router-outlet
2）路由字典中指定children，定义方式与vue类似，需要注意的是子组件的路径不要求加上父组件的路径
3）访问子组件
父组件中进行routerLink跳转时，要么路径"/parent/child"，要么"child"

1.5 路由守卫

路由守卫本质就是执行运算，判断可否允许访问组件
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#路由独享的守卫

1. 创建服务
   ng g service my-guard

   import { CanActivate } from '@augular/router';
   export class MyGuardService implements CanActivate{
         canActivate(){
           //执行一些运算
           return boolean/Observable/Promise
         }
   }
   

2. 调用具备守卫功能的服务
   1）引入对应守卫的服务
   2）找到受保护的路由对象，指定canActivate

   import {MyGuardService} from '../xxx.service'
   {
     path:'admin',
     component:AdminComponent,
     canActivate:[MyGuardService]
   }
   

2 ionic

官网: ionicframework.com
官方手册: https://ionicframework.com/docs/v3
字体图标icon: ionicons.com

2.1 概述

Ionic = angular + ionicModule + icon + cordova(phonegap)

移动端开发的3种常见形式:
1） WebApp:采用前端技术来编写可以运行在手机浏览器中的，类似原生app效果的网页
2） NativeApp:采用java/swift/kotlin/oc来调用由Google/Microsoft/Apple公司所提供的SDK(software development kit)来完成原生的应用的开发,是运行在手机OS的
3） HybridApp:采用web前端技术和原生开发技术，来进行编程，而生成可以安装在手机OS中的app
phoneGap/appcan/369clound…

ionic可以实现webApp，也可以借助内部集成的cordova来实现hybridApp

2.1 搭建环境

https://ionicframework.com/docs/v3/
npm install -g ionic
ionic start myApp tabs/blank/sidemenu
cd myApp
ionic serve

2.2 创建和调用page

创建：ionic g page demo01
调用：
1）根模块app.module声明组件类

import { Demo01Page } from '../pages/demo01/demo01';
@NgModule({
  declarations: [Demo01Page],
  entryComponents: [Demo01Page]
})

2）根模块的组件中调用新的页面类：可以作为根组件、子组件、路由来单独访问

2.3 ionic提供的组件类

1. button
   ion-button
   color=‘primary/secondary/danger/light/dark’ theme/variables.scss 修改$colors自定义设置
   block 块级
   clear
   outline
   round
   icon-left/right
   字体图标，结合icon-left/right调整位置以改变其与文本顺序

2. list
   1）普通列表

    
      文本1
      文本1
    
   

   2）icon列表

   
     
     文本1
   
   

   3）头像列表avatar

   
     
       
     
     文本1
   
   

   4）缩略图列表thumbnail

   
     
       
     
     文本1
   
   

   5）支持侧滑动的列表项
   side属性值为left则表示将隐藏的元素放置在item的左侧隐藏

   
       列表项1
       
         删除
       
   
   

   6）下拉刷新
   6.1）在ionContent的顶部指定一个组件

   spinner : ios/ios-small/bubbles/circles/crescent/dots，表示正在刷新的图表
   6.2）在ion-refresher标签上绑定事件ionRefresh
   6.3）事件处理函数中处理数据，并借助$event参数结束事件：xxx.complete()

   7）上拉加载更多
   7.1）在ionContent的底部指定一个组件

   spinner : ios/ios-small/bubbles/circles/crescent/dots，表示正在刷新的图表
   7.2）在ion-infinite-scroll标签上绑定事件ionInfinite
   7.3）事件处理函数中处理数据，并借助$event参数结束事件：xxx.complete()

3. grid
   栅格系统，布局方式与bootstrap类似，基于Flexbox。

   列属性：
   col-*设置列宽占12等份的几分；
   offset-*设置左侧偏移量；
   push-*向右推，不影响之后的列，产生重叠效果
   pull-*向左拉，不影响之后的列，产生重叠效果
   align-self-start/center/end 设置某一列在当前行中的纵向对齐

   行属性：
   align-items-start/center/end 设置行中所有列的纵向对齐：顶部、居中、尾部
   justify-content-start/center/end 设置行中所有列横向对齐左边、居中、右边

4. slides轮播图

   
      商品1
      商品2
      商品3
    
   

   pager表示指示器，pagingationType ='bullets/fraction/progress’表示圆点、分数、进度条；
   effect='slide/fade/flip/cube’表示滑动/淡入/旋转/3D

5. 交互窗口
   各种窗口创建步骤相似，在引入类型上有区别；常在服务中封装
   1）loading加载中

   引入并实例化
       import {LoadingController} from 'ionic-angular'
   	constructor(private loadingCtrl:LoadingController){}
   创建窗口
   	var myLoading=this.loadingCtrl.create({
   	  duration:1000,
   	  content:'正在刷新。。。'
   	})
   显示窗口myLoading.present()
   其他方法setContent()，dismiss()
   

   2）toast通知

   引入并实例化
       import {ToastController} from 'ionic-angular'
   	constructor(private toastCtrl:ToastController){}
   创建窗口
   	var myToast=this.toastCtrl.create({
   	  message:'xxx',
   	  duration:1500,
   	  positionn:'top/middle/bottom',
   	  showCloseButton:true,
   	  closeButtonText:'xxx'
   	})
   显示窗口present()
   

   3）alert警告/确认/提示
   最多只能设置两个按钮

   引入并实例化
       import {AlertController} from 'ionic-angular'
   	constructor(private alertCtrl:AlertController){}
   创建窗口
        this.alertCtrl.create({
          message:'窗口要显示的内容',
          inputs:[
           {placeholder:'',type:''},
           {placeholder:'',type:''},
          ],
          buttons:[
            {text:'yes',handler:(list)=>{
   	       //list[0]来获取第1个输入框输入的数据
   	       //list[1]来获取第2个输入框输入的数据
   	     }},
            {text:'no',handler:()=>{}},
          ]
        })
   

   4）actionSheet多个选项中选择(分享)

   引入并实例化
       import {ActionSheetController} from 'ionic-angular'
   	constructor(private asCtrl:ActionSheetController){}
   方法：create({
     title:'请选择分享至：',
     buttons:[
       {text:'分享到朋友圈'},
       {text:'取消',role:'cancel'},//单独再最下方显示
       {text:'删除',role:'destructive'}//红色高亮显示
     ]
   })，present()
   

   5）modal自定义模态窗口

   引入并实例化
       import {ModalController} from 'ionic-angular'
   	constructor(private modalCtrl:ModalController){}
   方法：
   create(xxxPage)需要先引入page作为模态窗显示的内容
   present()
   
   模态窗的关闭
   import {ViewController} from 'ionic-angular'
   conscturctor(private viewCtrl:ViewController){}
   this.viewCtrl.dismiss()
   模态窗关闭时传参
   this.viewCtrl.dismiss(0)
   
   原page接收参数
   myModal.onDidDismiss((data)=>{
   	//data是模态窗关闭时传递的参数
   })
   

6. forms表单元素
   表单在ionic中通过ionList进行管理，表单元素放在ionItem中
   ion-label(属性：fixed/stacked分行/floating获取焦点分行)
   ion-input
   ion-checkbox
   ion-radio(如果需要设置在同一组，在ion-list标签中添加radio-group属性)
   / …(ion-range / ion-select…)

7. 卡片card
   为了更好地呈现信息

8. fab悬浮式操作按钮
   Floating Action Button悬浮式操作按钮
   ion-fab可设置属性left/right/center top/bottom/middle

     
       
   	//标注隐藏按钮展开地方向
   	  btn1
   	  btn2
   	
     
   

9. 支持滚动的容器

10. tabs
    1）在视图中调用ionTabs
    html只保留ion-tabs

    2）给ionTabs每个ionTab指定选中显示的页面
    import {HomePage} from ‘xxx’
    home=HomePage