ionic 教程
ionic 安装
本站实例采用了ionic v1.0.1 版本，下载地址为：。
ionic 最新版本下载地址：。
下载后解压压缩包，包含以下目录：
Javascript文件
version.json
版本更新说明
你也可以在 Github 上下载以下资源文件：（在release 目录中）。
接下来，我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。
&ion-header-bar class="bar-positive"&
&&&&&h1 class="title"&Hello World!&/h1&
&/ion-header-bar&
&ion-content&
&&&&&p&我的第一个 ionic 应用。&/p&
&/ion-content&
点击 "尝试一下" 按钮查看在线实例。
本教程着重讲解 ionic 框架的应用，大部分实例在浏览器中运行 ，移动设备上运行可以在接下来的命令行安装教程中详细了解。
注意：在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。
命令行安装
首先您需要安装 ，我们在接下来的安装中需要使用到其 NPM 工具，更多 NPM 介绍可以查看我们的。
然后通过安装最新版本的 cordova 和 ionic 。通过参考 和
官方文档来安装。
Window 和 Linux 上打开命令行工具执行以下命令：
$ npm install -g cordova ionic
Mac 系统上使用以下命令：
sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。
如果你已经安装了以上环境，可以执行以下命令来更新版本:
npm update -g cordova ionic
sudo npm update -g cordova ionic
使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：
$ ionic start myApp tabs
运行我们刚才创建的ionic项目
使用 ionic tool 创建，测试，运行你的apps(或者通过Cordova直接创建)。
创建Android应用
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
如果一切正常会弹出模拟器，界面如下所示：
创建iOS应用
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
如果出现"ios-sim was not found."错误，可以执行以下命令：
npm install -g ios-sim
如果一切正常会弹出模拟器，界面如下所示：
Ionic Lab 是桌面版的开发环境，如果你不喜欢使用命令行操作，Ionic Lab 将会满足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始，编译，运行，和模拟运行Ionic的应用程序。
Ionic Lab 支持的平台有：Window、Mac OS X、Linux，下载地址为：，下载后直接安装即可。整个操作界面如下所示：
通过以上界面你可以完成以下操作：
运行日志查看
推荐使用Sublime Text作为 Ionic 项目的编辑器，我们可以通过 Ionic Lab 直接在Sublime Text 上打开项目，如下图：
Gif 操作演示以及 cordova 环境配置详细过程,(错误解决)
以及 cordova 环境配置详细过程,(错误解决)
[摘要：全部装置进程: 1. jdk 1.7.2 (/technetwork/java/javase/downloads/index.html) 装置好以后 情况变量设置装备摆设: 新建体系变量JAVA_HOME 战CLASSPATH 变量名：JAVA_HOME 变量：C:Program FilesJavajdk1.7.0 变量]
整个安装过程: & &
1. jdk 1.7.2 & (/technetwork/java/javase/downloads/index.html)
安装好之后环境变量配置:
& &&新建系统变量JAVA_HOME
和CLASSPATH&
& & & & &变量名：JAVA_HOME&
& & & &变量值：C:Program FilesJavajdk1.7.0
& & & &变量名：CLASSPATH&
& & & &变量值：.;%JAVA_HOME%libdt.%JAVA_HOME%libtools.
&变量名：Path&
& & & & &变量值：%JAVA_HOME%%JAVA_HOME%
2.Android SDK &(参考该文章(转载,作者-边写边唱)/zoupeiyang/p/4034517.html)&
&中间选择按照命令行来安装,会直接给你配置好环境变量.
&此处注意,选择第二个选项:
安装完成之后
cmd 测试 : 输入 git &如下安装成功
4. nodejs &以及 npm&
下载地址(https://nodejs.org/)
nodejs 安装简单,直接, 下一步下一步,然后完事.
cmd 测试: 输入 &npm -v & 和 &node -v & & 结果如下说明成功.
5. Apache ant &
下载地址(http://ant.apache.org/bindownload.cgi)
安装: 下载压缩包后,解压到硬盘下的某一个目录(随便你)
配置环境目录:
ANT_HOMEG:adt-bundle-windows-x86_64-apache-ant-1.9.4
CLASSPATH;%ANT_HOME%
PATH&&;%ANT_HOME%
6. &ionic &cordova
安装：打开cmd，按照官网的教程，如上全部安装完成之后，在cmd 里面 输入 &npm install -g ionic cordova 之后就可以顺利安装了
但是我在这个地方安装的时候总是报错，无奈之下，百度谷歌，最后也阴差阳错的，找到了解决办法：
如果 &&npm install -g ionic cordova &
你这一过程正常进行，那就最好了，下面的也用看了，但是如果出错的话，
我是这么解决的，在安装ionic 和cordova 之前，先安装 &express &
&原本是想拿express 测试一下的，看是否是网络的问题，结果express 可以安装，然后在安装ionic 和cordova 居然就可以安装了。
具体步骤就是 &你完成上面的5个步骤之后：
cmd 输入：npm &install express & &安装完成之后
cmd 输入：npm install -g ionic （终于不报错）安装完成之后
cmd 输入：npm Install -g cordova&
终于大功告成！！！
最后测试：
cmd输入：ionic & & 以及 & cordova -v & 测试：
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊环境搭建步骤：
1、安装node.js &这是为了使用npm来安装ant，cordova，ionic
&验证是否安装好node.js的方法是在命令提示符中输入&node -v& & & 若出现版本号，证明安装成功。
&nodejs 中文网站&&下载安装就可以了 & 安装步骤可以参考&
2、下载jdk，并配置java环境（网上教程很多）& & & 验证是否安装好的方法是在命令提示符中输入&javac&& & & 若出现如下内容，证明安装成功。 &&
3、安装ant,并配置相应的环境（网上搜教程）
& & & 验证是否安装好ant的方法是在命令提示符中输入&ant -v&
& & & 若出现版本号，证明安装成功。
4、安装cordova&
& & 安装不成功通过如下方式：&npm install -g cnpm --registry=https://registry.npm.taobao.org& & 执行成功后，输入&cnpm install -g cordova 安装
& & 验证是否安装好cordova的方法是在命令提示符中输入&cordova -v&
& & 若出现版本号，证明安装成功。
5、安装express &
& & &cmd 输入：npm &install express &等待一会即可
6、安装android sdk 配置环境变量 &cmd-&adb&
7、安装Ionic &
& & 验证是否安装好ionic的方法是在命令提示符中输入&ionic -v&
& & 若出现版本号，证明安装成功。
创建Ionic项目
Ionic官网提供了三个项目模板blank、tabs和sideMenu ，参阅：&我们使用blank空模板创建一个我们的应用，并且完成一个简单的tabs导航的小应用，打开PowerShell cd到开发目录，执行：
ionic start myIonic blank
其中myIonic为我们的项目名称&
执行过程它会从github下载项目源码，请等待。。。&
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。&
目录下有以下文件：
因为Ionic是基于angularjs框架开发的，所以在使用Ionic之前需要对angularjs有一定的了解。&
在开发初期的调试我们一般会使用浏览器作为我们的调试工具，Ionic提供了一个serve命令为我们的应用创建web站点可
ionic serve
执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。
PS. 开启livereload后Ionic会默认监听www下面的文件，如果需要自定义的话请编辑ionic.project的watchPatterns来设置需要监听的范围
"name": "myIonic",
"app_id": "",
"watchPatterns": [
"www/js/*",
"www/js/*/*",
"www/*.html",
"www/templates/*.html",
"www/css/*.css"
　　www/index.html作为我们的程序入口文件，首先编辑这个文件，在body标签中加入
&ion-nav-bar class="bar-positive"&
&ion-nav-back-button&
&/ion-nav-back-button&
&/ion-nav-bar&
&ion-nav-view&&/ion-nav-view&
　　这段标签对于对Ionic不熟悉的人来说可能有点陌生，Ionic针对移动端自定义了一套样式库，并且使用Angular的指令封装了各个模块，ion-nav-bar是导航页面头部、ion-nav-view是导航内容页面。inde.html入口页面我们已经写完了，接下来我们新建两个我们自己的页面。我们在www目录下新建一个templates文件夹，存放我们的页面并新建页面：tabs.html&作为我们tab应用的主页面：
&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中加入该页面的路由
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a &body& attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
.state('tabs.home', {
url: "/home",
'home-tab': {
templateUrl: "templates/home.html"
.state('tabs.facts', {
url: "/facts",
'home-tab': {
templateUrl: "templates/facts.html"
.state('tabs.about', {
url: "/about",
'about-tab': {
templateUrl: "templates/about.html"
$urlRouterProvider.otherwise("/tab/home");
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
if(window.StatusBar) {
StatusBar.styleDefault();
哈，我们tab应用的大概样子已经出来了，但是现在点击下面的菜单并没有什么反应，接下来我们就要开始添加我们的子页面了，在templates文件夹中新建：home.html、facts.html、about.html&
home.html 首页
&ion-view view-title="Home"&
&ion-content class="padding"&
&a class="button icon icon-right ion-chevron-right" href="#/tab/facts"&Scientific Facts&/a&
&/ion-content&
&/ion-view&
facts.html
&ion-view view-title="Facts"&
&ion-content class="padding"&
&a class="button icon icon-right ion-chevron-right" href="#/tab/home"&Home&/a&
&/ion-content&
&/ion-view&
about.html
&ion-view view-title="About"&
&ion-content class="padding"&
&/ion-content&
&/ion-view&
ion-view是我们子页面的内容，属性view-title可以设置页面头部的标题名称，添加好文件后我们需要在app.js中加入各个页面的路由，并且需要对之前的tabs路由做一个调整。
大家发现tabs路由增加了一个abstract字段，该字段在angular中的解释是抽象页面，不能独立作为页面展示只能作为其他页面父页面，当加载子页面之前加载父页面。&其他子页面的路由和tabs路由的配置有所不同名称命名是父路由.子路由的形式，并且增加了一个views字典，字段的key值对应着我们前面所说的tabs.html中ion-nav-view的name属性，表示该路由跳转的页面属于某个tab的子页面，同时修改我们的otherwise默认页为/tab/home。&保存之后浏览器自动刷新，我们来看一下效果。&
好了，我们来点点看吧，页面切换Ionic已经帮我们实现了类似原生app的切换动画效果，是不是有一点原生app的感觉了？下面章节我们会实现在移动端的部署
部署到手机和cordova插件的使用
一个简单的Web应用我们已经开发完成了，接下来我们就要做一些部署到移动端之前的准备了。&Ionic支持两个平台ios、android，默认的Ionic项目并没有添加这两个平台，我们需要手动添加，cd到开发目录下执行命令：
ionic platform add android
ionic platform add ios
一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：
ionic platform list
Installed platforms: android 4.0.0, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8
接下来的部署我们分开讲述：
Android&Android部署分真机和虚拟机，其实方法类似，在部署之前需要安装JDK、Android SDK到开发环境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去，并把Android SDK安装目录添加到Path中。&
配置好之后打开PowerShell输入命令返回正确：
adb version
接下来就简单了，把手机连接到电脑，并开启usb调试模式，执行命令：
ionic run android
Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用，是不是很简单？
我们在前面已经说过，在开发前期我们一般会在web中调试，而Ionic为我们提供了非常方面的web调试环境，只需要执行ionic serve就可以实现lievereload，而在部署到移动端后也可以开启livereload的，我们只需要修改下我们run命令参数：
ionic run android --livereload -c -s
这是android的调试模式，无论在虚拟机上还是在手机上都可以实现livereload，不用每次开发完成编译再部署！-c是开启客户端日志输出，-s是开启服务器端日志输出。
android打包
能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉，我这里简单说明下：&Android&Android的打包比较简单执行命令：
ionic build android -release
找到www/platform目录下生成的apk包，此时的apk还不能被安装到手机上，还需要一步签名操作，大家可以参考：
创建key，需要用到keytool.exe (位于jdk1.6.0_24\jre\bin目录下)，使用产生的key对apk签名用到的是jarsigner.exe (位于jdk1.6.0_24\bin目录下)，把上两个软件所在的目录添加到环境变量path后，打开cmd输入
D:\&keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore
/*说明：-genkey 产生密钥
&&&&&&&-alias demo.keystore 别名 demo.keystore
&&&&&&&-keyalg RSA 使用RSA算法对签名加密
&&&&&&&-validity 40000 有效期限4000天
&&&&&&&-keystore demo.keystore */
D:\&jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore
/*说明：-verbose 输出签名的详细信息
&&&&&&&-keystore& demo.keystore 密钥库位置
&&&&&&&-signedjar demor_signed.apk demo.apk demo.keystore 正式签名，三个参数中依次为签名后产生的文件demo_signed，要签名的文件demo.apk和密钥库demo.keystore.*/
　　注意事项：android工程的bin目录下的demo.apk默认是已经使用debug用户签名的，所以不能使用上述步骤对此文件再次签名。正确步骤应该是:在工程点击右键-&Anroid Tools-Export Unsigned Application Package导出的apk采用上述步骤签名。
阅读(...) 评论()}