Ionic for Angular 創建模版基本操作

【Ionic CLI】版本信息如下:

本節學習知識點:

  • Ionic 創建模版:【ionic start ionDemo01】,提示如下:

提示需要選擇 js 框架,由於【ionic 4.x】及以後的版本都支持【Angular】【React】【Vue】,所以創建命令如下:

【ionic strat ionDemo01 --type=angular】,提示如下:

【Ionic cli】6.2.1版本提供瞭如上圖中的模版【template】信息,創建項目的時候可以選擇一個模版信息;

  1. 【tabs】 ==》 具有簡單選項卡式界面的啓動項目;
  2. 【sidemenu】==》內容區域中帶有導航的側菜單的啓動項目;
  3. 【blank】==》空白項目/空模版;
  4. 【list】==》帶有列表的啓動項目;
  5. 【my-first-app】==》使用圖庫構建相機的示例應用程序;
  6. 【conference】==》一款 kitchen-sink 應用程序,展示了Ionic提供的所有功能;

此處我們選擇【tabs】模板創建【ionic for angular】項目:【ionic start ionDemo01 tabs --type=angula】

? Create free Ionic account? (y/N) 選擇n,暫時不創建賬號;

 繼續按照提示走,進入剛纔創建的項目【ionDemo01】: 【cd ionDemo01】,然後安裝項目依賴:【npm install】

 運行項目【ionDemo01】, 【ionic serve】查看項目是否運行成功:

 以上就創建好【ionic】的 tabs 模板項目,接下來嘗試裏面的調整:

  1. 默認模版新增底部導航欄;
  2. 頁面跳轉及返回;

創建【tabs】模板項目的目錄結構如下,和 ng 類似:

 在【ionic for angular】項目中,ionic 模板中的 page 就是 ng 中的 module,然後實現 路由的懶加載方式,模塊工程化應用的體現,繼續完成上面的目標【嘗試調整】。

創建一個tab4頁面,【ionic g page tab4】, 此時就會在【app-routing.module.ts】路由配置裏面動態添加如下配置:

 

 此處我們暫時刪除配置,調整到tab4 頁面/模塊的路由配置中去,調整如下:

 然後在tabs的html組件中添加底部菜單欄 => 名稱【tab4】(在【ion-tab-bar】中添加)

 保存運行【ionic serve】,顯示如下:【ion-icon】圖標顯示 =》https://ionicons.com/ 

 繼續實現頁面跳轉(和ng類似)和返回,繼續創建一個頁面模塊,【ionic g page naws】,在tab1的html頁面中添加按鈕,點擊跳轉到新聞頁面,然後新聞頁面顯示對應的新聞信息,同時可以返回到tab1;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章