第二课:准备工作
本课是在旅程继续进行之前的一些准备工作。我们要生成应用,设置所有组件和需要用到的Cordova插件。完成本课之后我们应该有一个万事俱备的项目骨架,可以接着进行编码工作。
开始新项目的第一准则是确保使用的是最新版的Ionic和Cordova,如果最近没有更新过的话可以运行如下命令:
npm install -g ionic cordova
或者
sudo npm install -g ionic cordova
如果在安装Ionic或者生产新项目的时候遇到任何问题的话,检查下是否安装了最新版的Node。安装完之后,再次安装ionic之前请运行:
npm uninstall -g ionic npm cache clean
生成新应用
本应用将使用空白初始模板,跟名字说的一样,就是个空的Ionic项目。但是会有一个内置的页面名为home,我们下节课中将用作列表显示页。
> 运行如下命令生成新项目:
ionic start snapaday blank --v2
> 运行如下命令将新生成的项目作为当前目录:
cd snapaday
现在可以在你中意的编辑器中打开这个项目了。通过以下命令可以预览创建的应用:
ionic serve
看起来是这样的:
创建需要的组件
应用的架构很简单,我们会有两个页面:主页含有照片和一个展示页。我们已经有了一个home组件用作列表页,所以我们只要创建一个Slideshow页面就可以了。
> 运行如下命令生成 Slideshow 页面:
ionic g page Slideshow
创建需求的服务
跟我们的两个页面一样,我们需要创建一个数据服务来存储和获取照片,由于我们在应用中有很多警告信息,所以我们也需要创建一个服务来更方便的处理他们。
> 运行如下命令生成 Data 提供者:
ionic g provider Data
> 运行如下命令生成 Alert 提供者:
ionic g provider SimpleAlert
我们还需要创建自定义的Pipe来讲拍照日期转换成更友好的内容,例如‘5 天前’。
> 运行如下命令生成 DaysAgo 管道:
ionic g pipe DaysAgo
创建数据模型
我们将为我们的照片创建一个数据模型用于更简单的创建和更新他们。不幸的是,没有现有命令用来生成,所以我们要手动创建。
> 在 src 文件夹内创建一个新的文件夹名为models:
> 在 models 文件夹内创建一个新的文件名为 photo-model.ts: