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;