04-Ionic模版的使用

使用Ionic的CLI和模板创建tabs模版App打开GitBash终端,使用cd命令跳转到创建应用程序App的目录。创建tabs模版App-----------------------------------------输入命令ionicstartdefaultApptabs并回车,生成一个以tabs为模版的App。defaultApp是App的命名，tabs是Ionic的默认模板名。即使这里我们不输入tabs，创建的App仍然是“basedontabsproject.”。Ionic还有许多其他类型的模版，后面会一一介绍。-----------------------------------------下一步运行App使用cd进入App的根目录。运行应用程序-----------------------------------------输入ionicserve并回车，运行应用程序，浏览器会自动打开并预览tabs模版的App。-----------------------------------------下一步浏览器预览tabs模板App单击“Chats”进入Chats页面浏览器预览tabs模板App------------------------------------这就是tabs模板App，该应用程序默认使用Status页面。页面中展示了一些状态信息，底部展示了选项卡tabs。我们可以单击不同的tab，进入不同的内容页面。浏览器预览tabs模板App的Chats页面单击“BenSparrow”进入Chats子页面Chats页面------------------------------------进入Chats页面后，可以看到一个包含头像、人名等信息的列表；而页面底部仍然是tabs。单击列表选项可进入子页面。使用导航返回上级页面单击“Chats”---------------------------------我们并不一定要使用选项卡tabs进入其他页面，因为使用导航按钮也可以从子页面返回到上级页面。使用导航返回上级页面返回到Chats页面返回到Chats页面-----------------------------------使用导航按钮返回到上级页面。第一个模板就讲到这里，下面我们回到命令行。-----------------------------------下一步服务端的CLI命令服务端的CLI命令-----------------------------------------使用ionicserve命令进入Ionic服务器后，我们还需要熟悉一些服务端命令：restart或者r可以重新启动客户端应用程序；quit或者q可以退出服务器端程序；consolelogs或者c在模拟器或者真实的手机上测试比较有用，它们可以控制终端输出日志，可以debug。下面我们输入q退出服务器，开始学习另一个模板sidemenu。-----------------------------------------下一步创建sidemenu模板App创建sidemenu模板App-----------------------------------------使用cd命令跳转到创建App的目录后,再输入命令ionicstartsideAppsidemenu并回车,创建sidemenu模版的App，其中sideApp为App的名称，sidemenu为模版名。-----------------------------------------下一步浏览器预览sidemenu模板App更改目录至创建的App根目录后，输入ionicserve并回车，浏览器会自动打开预览sidemenu模版的App。单击“菜单”按钮展示左侧菜单浏览器预览sidemenu模板App------------------------------------在右图的浏览器中我们看到了一个列表。列表左上角有一个按钮，单击该按钮可打开一个左侧菜单。展示左侧菜单展示左侧菜单--------------------------------这就是左侧菜单。sidemenu模板我们就介绍到这里，下面我们来看看blank模板。--------------------------------下一步创建blank模版App创建blank模版App-----------------------------------------使用cd命令跳转到创建App的目录,再输入命令ionicstartblankAppblank并回车,创建App。其中blankApp为项目名称，blank为模版名。blank是最简单的模版，它没有路由，除了一个标题就不再有其他内容，但它可以方便用来从无到有的构建程序。-----------------------------------------下一步预览blank模版App更改目录至创建的blankApp根项目，输入命令ionicserve并回车，浏览器会自动打开预览blank模版的App。预览blank模版App--------------------------------如右图浏览器所示，blankApp只有一个标题。由于blank模板很简洁，所以该模板是一个很好的学习模板，在后面的章节我们将采用blank模板介绍其他知识。--------------------------------下一步模板的index.html文件blank模板App的目录结构和上一节讲到的tabs模板App的目录结构是相同的。Index.html文件--------------------------------使用编辑器sublimetext打开blankApp中的index.html文件。仔细观察，发现文件中只有少量的代码，且在body部分，只有Ionic标签ion-pane、ion-header-bar和ion-content。--------------------------------下一步模板的app.js文件在js文件夹下，blank模板和tabs模板的不同点在于：blank模板只有一个app.js文件。app.js文件-----------------------------------app.js文件中只有少量的代码，这些代码用来初始化平台，该文件中没有任何与路由相关的代码。下面我们来看看另一种不同类型的模板：GitHubrepo模板。------------------------------------下一步不同类型的模板不同类型的模板---------------------------------------在浏览器中打开网址后，可发现模板有多种不同的类型。其中Namedtemplate、GithubRepo和Codepen是比较常用的模板类型。我们熟悉的tabs、sidemenu和blank都属于Namedtemplate。Namedtemplate还会随时间的推移而逐渐增加。---------------------------------------下一步单击“sidemenu”----------------------sidemenu、tabs和blank等实际上就是GitHubrepo，因为它们是GitHub的快捷方式。进入GitHub网页进入GitHub网页的url可代替模板名url代替模版名-----------------------------------------我们可以使用url代替模版名，创建App。这样做的目的是：假如我们想使用其他的模版，但是这个模版没有特定的名称，那么我们就可以通过输入其对应的url来代替模版名。在这一点上，Codepen和GitHub是相同的。在接下来讲解Codepen时，我们会展示如何使用url代替模板名。-----------------------------------------下一步单击“Codepen”---------------------------我们还可以在终端使用Codependemo选项作为模板名，创建App。打开Codependemo网页选项单击“FlickrSearchExample…”进入Codependemo的选项网页作为模板名url作为模版名----------------------------------就像模板名sidemenu一样，我们可以将该url作为模版名，创建App。----------------------------------下一步搜索测试-----------------------------在搜索栏搜索cat，会出现很多与猫相关的图片。页面的上半部分是相关代码。211建立基于url模板的应用程序建立基于url模板的应用程序------------------------------------------------------------回到终端，使用cd命令跳转到创建项目的目录后，再输入ionicstartflickrApp其中flickrApp为项目名称，代替了模版名。------------------------------------------------------------下一步运行基于url模版的应用程序运行基于url模版的应用程序--------------------------------更改目录至创建的flickrApp根目录，输入命令ionicserve运行项目，浏览器将自动打开预览App。--------------------------------下一步搜索cat搜索cat-----------------------------------浏览器打开了应用程序。我们搜索cat，同样会出现许多和猫相关的图片。这说明我们使用url作为模板生成应用程序是可行的。-----------------------------------下一步模板中的index.html文件模版中的index.htm文件---------------------------------