Ionic开发实战

折磨的两个月！Ionic从零单排，到项目发布！遇到了很多问题但都一一解决了，此篇文章留作记录。
当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下，是不是能够是用hybrid app来代替原生来完成这个项目，经过一些技术调研之后选择了Ionic。当时是对Ionic一无所知，凭借一些盲目的自信，想着方正有开发文档能有什么问题呢。现在想想都觉得当时有点冲动万一中间出现什么坑或者无法解决的问题都找不到可以咨询的人。不过好歹结果是好的，基本实现了当初需求设计，并且效果还不错。

步骤：

1.Ionic环境安装

Ionic开发是依赖于Nodejs环境的，所以在开发之前我们需要安装好Nodejs。下载安装：
安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功，如果返回版本号则说明成功。
在PowerShell命令行中执行：

npm install -g cordova ionic

这是使用npm包管理器安装cordova和ionic，-g的意思是全局安装，全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。

PS. 安装过程需要打开VPNFQ，貌似是资源被墙了，无语。

2.创建Ionic项目

Ionic官网提供了三个项目模板blank、tabs和sideMenu ，参阅：
我们使用blank空模板创建一个我们的应用，并且完成一个简单的tabs导航的小应用，打开PowerShell cd到开发目录，执行：

ionic start myIonic blank

其中myIonic为我们的项目名称
执行过程它会从github下载项目源码，请等待。。。
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件：

因为Ionic是基于angularjs框架开发的，所以在使用Ionic之前需要对angularjs有一定的了解。
在开发初期的调试我们一般会使用浏览器作为我们的调试工具，Ionic提供了一个serve命令为我们的应用创建web站点可以非常方便的调试应用， cd到开发目录下，执行命令：

ionic serve

执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。

PS. 开启livereload后Ionic会默认监听www下面的文件，如果需要自定义的话请编辑ionic.project的watchPatterns来设置需要监听的范围

www/index.html作为我们的程序入口文件，首先编辑这个文件，在body标签中加入

这段标签对于对Ionic不熟悉的人来说可能有点陌生，Ionic针对移动端自定义了一套样式库，并且使用Angular的指令封装了各个模块，ion-nav-bar是导航页面头部、ion-nav-view是导航内容页面。inde.html入口页面我们已经写完了，接下来我们新建两个我们自己的页面。我们在www目录下新建一个templates文件夹，存放我们的页面并新建页面：tabs.html 作为我们tab应用的主页面：

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> </ion-tabs>

ion-tab为tab应用的底部菜单项 title是菜单按钮显示的文字，icon是菜单按钮图标，href是点击菜单的跳转地址，子元素ion-nav-view是点击菜单后子页面显示的位置，ion-nav-view属性name为该tab的名称，后面添加子页面会详细描述。

然后在app.js中加入该页面的路由

$stateProvider .state('tabs', { url: "/tab", templateUrl: "templates/tabs.html", }) $urlRouterProvider.otherwise("/tab");

保存之后页面会自动刷新显示的应该是介个样子：

哈，我们tab应用的大概样子已经出来了，但是现在点击下面的菜单并没有什么反应，接下来我们就要开始添加我们的子页面了，在templates文件夹中新建：home.html、facts.html、about.html
home.html 首页

<ion-view view-title="Home"> <ion-content class="padding"> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> </p> </ion-content> </ion-view>

facts.html

<ion-view view-title="Facts"> <ion-content class="padding"> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a> </p> </ion-content> </ion-view>

about.html

<ion-view view-title="About"> <ion-content class="padding"> <p> About Us </p> </ion-content> </ion-view>

ion-view是我们子页面的内容，属性view-title可以设置页面头部的标题名称，添加好文件后我们需要在app.js中加入各个页面的路由，并且需要对之前的tabs路由做一个调整。

$stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html", }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html" } } }) .state('tabs.facts', { url: "/facts", views: { 'home-tab': { templateUrl: "templates/facts.html" } } }) .state('tabs.about', { url: "/about", views: { 'about-tab': { templateUrl: "templates/about.html" } } }) $urlRouterProvider.otherwise("/tab/home");