Angular
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
<any routerLink="/detail"></any>
angular传参步骤：
1）配置接收方的路由地址
/detail:id
2）发送
this.myRouter.navigateByUrl('/detail/10')
this.myRouter.navigateByUrl('/detail/'+this.uName)
<any routerLink="/detail/10"></any>
<any routerLink="/detail/{{myId}}"></any>
<any [routerLink]="'/detail/'+myId"></any>
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#路由独享的守卫
-
创建服务
ng g service my-guardimport { CanActivate } from '@augular/router'; export class MyGuardService implements CanActivate{ canActivate(){ //执行一些运算 return boolean/Observable/Promise } } -
调用具备守卫功能的服务
1）引入对应守卫的服务
2）找到受保护的路由对象，指定canActivateimport {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提供的组件类
-
button
ion-button
color=‘primary/secondary/danger/light/dark’ theme/variables.scss 修改$colors自定义设置
block 块级
clear
outline
round
icon-left/right
<ion-icon name=""></ion-icon>字体图标，结合icon-left/right调整位置以改变其与文本顺序 -
list
1）普通列表<ion-list> <ion-item>文本1</ion-item> <ion-item>文本1</ion-item> </ion-list>2）icon列表
<ion-item> <ion-icon item-start/end name="home"></ion-icon> 文本1 </ion-item>3）头像列表avatar
<ion-item> <ion-avatar item-start/end > <img /> </ion-avatar> 文本1 </ion-item>4）缩略图列表thumbnail
<ion-item> <ion-thumbnail item-start/end > <img /> </ion-thumbnail> 文本1 </ion-item>5）支持侧滑动的列表项
side属性值为left则表示将隐藏的元素放置在item的左侧隐藏<ion-item-sliding > <ion-item>列表项1</ion-item> <ion-item-options side='left'> <button ion-button color='danger'>删除</button> </ion-item-options> </ion-item-sliding>6）下拉刷新
6.1）在ionContent的顶部指定一个组件<ion-refresher> <ion-refresher-content pullingText="" refreshingText="" pullingIcon="" refreshingSpinner=""> </ion-refresher-content> </ion-refresher>spinner : ios/ios-small/bubbles/circles/crescent/dots，表示正在刷新的图表
6.2）在ion-refresher标签上绑定事件ionRefresh
6.3）事件处理函数中处理数据，并借助$event参数结束事件：xxx.complete()7）上拉加载更多
7.1）在ionContent的底部指定一个组件<ion-infinite-scroll> <ion-infinite-scroll-content loadingText=""> </ion-infinite-scroll-content> </ion-infinite-scroll>spinner : ios/ios-small/bubbles/circles/crescent/dots，表示正在刷新的图表
7.2）在ion-infinite-scroll标签上绑定事件ionInfinite
7.3）事件处理函数中处理数据，并借助$event参数结束事件：xxx.complete() -
grid
栅格系统，布局方式与bootstrap类似，基于Flexbox。<ion-grid> <ion-row> <ion-col></ion-col> </ion-row> </ion-grid>列属性：
col-*设置列宽占12等份的几分；
offset-*设置左侧偏移量；
push-*向右推，不影响之后的列，产生重叠效果
pull-*向左拉，不影响之后的列，产生重叠效果
align-self-start/center/end 设置某一列在当前行中的纵向对齐行属性：
align-items-start/center/end 设置行中所有列的纵向对齐：顶部、居中、尾部
justify-content-start/center/end 设置行中所有列横向对齐左边、居中、右边 -
slides轮播图
<ion-slides autoplay=2000 loop pager paginationType='fraction' effect="slide" speed=1500 direction='vertical'> <ion-slide>商品1</ion-slide> <ion-slide>商品2</ion-slide> <ion-slide>商品3</ion-slide> </ion-slides>pager表示指示器，pagingationType ='bullets/fraction/progress’表示圆点、分数、进度条；
effect='slide/fade/flip/cube’表示滑动/淡入/旋转/3D -
交互窗口
各种窗口创建步骤相似，在引入类型上有区别；常在服务中封装
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是模态窗关闭时传递的参数 }) -
forms表单元素
表单在ionic中通过ionList进行管理，表单元素放在ionItem中
ion-label(属性：fixed/stacked分行/floating获取焦点分行)
ion-input
ion-checkbox
ion-radio(如果需要设置在同一组，在ion-list标签中添加radio-group属性)
/ …(ion-range / ion-select…) -
卡片card
为了更好地呈现信息<ion-card> <ion-card-header></ion-card-header> <ion-card-content></ion-card-content> </ion-card> -
fab悬浮式操作按钮
Floating Action Button悬浮式操作按钮
ion-fab可设置属性left/right/center top/bottom/middle<ion-fab right bottom> <button ion-fab></button> <ion-fab-list side="left/right/top/bottom">//标注隐藏按钮展开地方向 <button ion-fab>btn1</button> <button ion-fab>btn2</button> </ion-fab-list> </ion-fab> -
支持滚动的容器
<ion-scroll style="height:100px;" scrollX scrollY> </ion-scroll> -
tabs
1）在视图中调用ionTabs
html只保留ion-tabs<ion-tabs> <ion-tab tabTitle="" tabIcon="" [root]="home"></ion-tab> </ion-tabs>2）给ionTabs每个ionTab指定选中显示的页面
import {HomePage} from ‘xxx’
home=HomePage