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;

 

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