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