powertoolsteam 的BLOG
用户名：powertoolsteam
文章数：304
评论数：243
访问量：210455
注册日期：
阅读量：24883
阅读量：256920
阅读量：995531
阅读量：148017
51CTO推荐博文
本教程中，我们用 和 实现一个Mobile的工程:Hello World。Ionic是什么？Ionic是一个HTML5框架、免费、开源，用于帮助生成hybird mobile Apps (混合移动应用)。Ionic包含3部分：CSS 样式：用于渲染Web页面，使得页面更接近原生移动应用 (Native App)。：Ionic使用AngularJs的扩展指令作为核心框架库，同时AngularJs也加快了开发过程。Apache Cordova：Ionic使用Apache Cordova编译为mobile App，并提供了库--使用AngularJs扩展的Cordova API库。Ionic框架目前依然是beta阶段(截止本文完稿时间，最新版：v1.0.0-beta.12 "krypton-koala" ?
? MIT Licensed )，当前版本支持iOS6+ 和 Android 4.1+版本，且有计划会支持Windows设备。对其他较老的设备无版本支持计划。系统必备本教程会使用到下面的环境，请预先准备。在本教程中，我们使用Chrome用于开发、调试，同时，你也可以在Android和IOS设备上用其他浏览器来调试。配置系统环境，请参考，按照向导即可完成。快速入门基于上面的系统环境安装的NodeJs，我们先安装。下面分别区分Windows、Linux、Mac的命令行代码来安装：Windowsnpm install --g ionicLinux和Macsudo npm install --g ionic&下面通过命令创建工程ionic start ExpenseTracker blank && cd ExpenseTracker上面的命令使用了Ionic的空模板”blank”, 创建了一个名为“ExpenseTracker”Ionic工程; 创建成功后，我们进入新建的ExpenseTracker目录。 然后我们通过Ionic命令启动Web站点ionic serve该命令会启动Web服务，同时会使用默认浏览器启动页面。在Web服务启动情况下，所做的任何修改，刷新浏览器页面即可而不用重启Web服务，这个对于调试非常方便。我们会看到如下的页面：要停止服务，可在命令行下通过 结束服务。下面开始添加Wijmo 5的源码到我们创建的工程中，Wijmo5。先在工程的www/lib 文件夹下，创建一个Wijmo文件夹，并拷贝Wijmo源码下Dist的3个文件夹controls、interop、styles到新创建的Wijmo文件夹下。工程文件夹中的www/lib目录，包含了该app所要依赖的库文件。Wijmo 5下载后的源码路径概图：Iconic的目录浏览截图：配置好文件目录结构后，我们就可使用Inonic和Wijmo 5了。在www目录下，创建一个index.html，用您习惯使用的IDE(Visual Studio、Web Storm)进行编辑，添加jQuery、Wijmo引用：&!DOCTYPE&html&&html&
&&&&&meta&charset="utf-8"&
&&&&&meta&name="viewport"&content="initial-scale=1,&maximum-scale=1,&user-scalable=no,&width=device-width"&
&&&&&title&Expense&Tracker&|&Wijmo&5&/title&
&&&&&link&href="lib/ionic/css/ionic.css"&rel="stylesheet"&
&&&&&!--&Wijmo&CSS&--&
&&&&&link&href="lib/wijmo/styles/wijmo.css"&rel="stylesheet"&
&&&&&link&href="css/style.css"&rel="stylesheet"&
&&&&&!--&jQuery&-&load&this&script&before&Angular&--&
&&&&&script&src="lib/jQuery/dist/jquery.min.js"&&/script&
&&&&&!--&ionic/angularjs&js&--&
&&&&&script&src="lib/ionic/js/ionic.bundle.js"&&/script&
&&&&&!--&Wijmo&Scripts&--&
&&&&&script&src="lib/wijmo/controls/wijmo.min.js"&&/script&
&&&&&script&src="lib/wijmo/controls/wijmo.input.min.js"&&/script&
&&&&&script&src="lib/wijmo/controls/wijmo.grid.min.js"&&/script&
&&&&&script&src="lib/wijmo/controls/wijmo.chart.min.js"&&/script&
&&&&&script&src="lib/wijmo/interop/angular/wijmo.angular.min.js"&&/script&
&&&&&!--&cordova&script&(this&will&be&a&404&during&development)&--&
&&&&&script&src="cordova.js"&&/script&
&&&&&!--&your&app's&js&--&
&&&&&script&src="js/app.js"&&/script&
&&&body&ng-app="starter"&
&&&&&ion-pane&
&&&&&&&ion-header-bar&class="bar-stable"&
&&&&&&&&&h1&class="title"&Ionic&Blank&Starter&/h1&
&&&&&&&/ion-header-bar&
&&&&&&&ion-content&class="padding"&
&&&&&&&/ion-content&
&&&&&/ion-pane&
&&&/body&&/html&我们注意到，在index.html 文件中，并未直接引用AngularJs文件，这个是因为Ionic（ionic.bundle.js文件）已经包含了AngularJs和其依赖，如UI-Router，故不需要直接引用了。使用Wijmo 5下面给Index.HTML文件中添加Wijmo 5控件，先需要在www/js/app.js文件中添加Wijmo的模块依赖――‘wj’。app.js完整代码如下：angular.module('starter',&['ionic',&'wj'])
.run(function($ionicPlatform)&{
&&$ionicPlatform.ready(function()&{&&&&//&Hide&the&accessory&bar&by&default&(remove&this&to&show&the&accessory&bar&above&the&keyboard
&&&&//&for&form&inputs)
&&&&if(window.cordova&&&&window.cordova.plugins.Keyboard)&{
&&&&&&cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
&&&&}&&&&if(window.StatusBar)&{
&&&&&&StatusBar.styleDefault();
})app.js中，已经完成对ionic和wijmo模块引入，下面则可直接使用Wijmo 5自定义的AngularJs指令了。在index.html文件的&body& 元素中，共引入了3个Icon的AngularJS 指令：&ion-pane&, &ion-header-bar&, 和&ion-content&。&ion-pane&: 该指令是一个容器用于填充内容。&ion-header-bar&: 该指令用于给页面添加一个header。&ion-content&: 该指令创建内容区域，并会用Ionic的自定义滚动视图代替浏览器默认的。在&ion-content&内，我们添加&wj-input-number （Wijmo InputNumber控件），完整代码如下：&ion-pane&
&&&&&&&ion-header-bar&class="bar-stable"&
&&&&&&&&&h1&class="title"&Ionic&Blank&Starter&/h1&
&&&&&&&/ion-header-bar&
&&&&&&&ion-content&class="padding"&ng-init="myValue=1"&
&&&&&&&wj-input-number&value="myValue"&step="1"&min="-5"&max="5"&&/wj-input-number&
&&&&&&&/ion-content&
&&&&&/ion-pane&运行工程，可以看到Wijmo的InputNumber控件已经添加到页面中，默认为1，最大值为5，最小值为-5，增长步长为1.&总结本文，我们创建了Ionic工程并添加Wijmo 5的InputNumber控件，即完成了一个Hello World！工程压缩包本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)[摘要：几个月之前最先打仗混杂式的APP开辟，首要用到了cordova+Ioinc框架，另有便是angularjs，开辟的第一步便是装置设置装备摆设开辟情况，方才最先标时间正在网上参考他人的装置步调装置cor]
几个月之前开始接触混合式的APP开发，主要用到了cordova+Ioinc框架，还有就是angularjs，开发的第一步就是安装配置开发环境，刚刚开始项目的时候在网上参考别人的安装步骤安装cordova+Ionic发现+的安装的文档更多一点。OSX环境的比较少，今天正好公司有一台MAC测试机器需要安装环境我就把安装步骤记下来了，到这里分享一下，让大家都少走弯路。也给自己一个备份，分享快乐。
步入正题：一下图文解说（图是我安装时截的图）
安装之前你要保证机器上xcode（ios的集成开发环境，添加ios时需要）已经安装完成（如果xcode安装不了你要看看系统版本和xcode兼容的最低系统版本，系统版本低则要先升级osx系统版本几个G吧，慢慢来）
关于xcode怎么下载安装我这里就不多说了，需要一个 ID /album/b87fe19eb309ff.html?picindex=5这里有,安装完成之后也不用配置环境变量，会自动添加，要有权限
1、安装cordova之前要安装nodejs 会包含npm安装（npm是个包管理器），到官网下载https://nodejs.org/en/download/ 是个pkg包下载之后双击下载包运行然后 step by step，osx下会自动添加环境变量，不用手动配置，默认安装到、usr/local下，可以更改目录
2、安装完成之后检查安装是否成功打开命令行输入一下两个命令(输出就是成功)
这一步一般没问题
3、这一步就可以安装cordova了(git不用安装，osx和都自带git，可以在命令行输入 git -v检查一下)
这一步的主要问题是cordova安装包的镜像问题，由于镜像在国外国内不行，出现安装失败的情况。这就要使用代理，在命令行输入一下两个命令
$npm config set registry http:
$sudo npm install -g cordova
第一个命令式配置代理
第二行全局安装cordova -g代表全局，需要root权限所以要sudo，需要管理员密码
如下图：前半部分的error是由于我没设置代理所以报错，显示下半部分就是安装成功了
4、输入如下命令测试是否安装成功
$cordova -v
如下则成功
下面就写一个demo测试一下吧
按照官网的步骤来就没错
创建一个hello的和一个项目
$ cordova create hello com.example.hello HelloWorld
进入文件夹
$ cd hello
添加ISO平台
$ cordova platform add ios
$ cordova build ios
$ cordova emulate ios
看到如下ios模拟器界面表示成功
分割线，如果你的项目没有用到ionic框架就不用往下看了
—————————————————————————————
Ioinc安装，cordova安装完成之后ionic安装就简单多了
直接一个命令安装，一个命令测试
$sudo npm install -g ionic
重点来了，看到花蓝线的那行了么?
它建议安装如图那天命令，所以要执行如图那条命令，否则可能失败
$sudo npm install -g ios-sim
这样就好啦，ionic的例子我就不写了，官网有和cordova差不多，照着命令敲就行
/getting-started/
以上的所有安装的目录都会在命令行里提示出来。
好了，分享完了，也给自己一个备份以后用，一起进步。求助，Mac系统cnpm安装ionic失败怎么破_百度知道
求助，Mac系统cnpm安装ionic失败怎么破
我有更好的答案
安装 确保已经安装 NodeJS, 然后打开命令行并运行以下: C:\& npm install -g phonegap 安装完成后，你可缉甫光晃叱浩癸彤含廓以在命令行调用的PhoneGap获得进一步的帮助。 用法 $ phonegap create my-app $ cd my-app $ phonegap run android
其他类似问题
为您推荐：
mac系统的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁SQLite 教程
SQLite 安装
SQLite 的一个重要的特性是零配置的，这意味着不需要复杂的安装或管理。本章将讲解 Windows、Linux 和 Mac OS X 上的安装设置。
请访问 ，从 Windows 区下载预编译的二进制文件。
您需要下载 sqlite-shell-win32-*.zip 和 sqlite-dll-win32-*.zip 压缩文件。
创建文件夹 C:\sqlite，并在此文件夹下解压上面两个压缩文件，将得到 sqlite3.def、sqlite3.dll 和 sqlite3.exe 文件。
添加 C:\sqlite 到 PATH 环境变量，最后在命令提示符下，使用 sqlite3 命令，将显示如下结果。
C:\&sqlite3
SQLite version 3.7.15.2
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
目前，几乎所有版本的 Linux 操作系统都附带 SQLite。所以，只要使用下面的命令来检查您的机器上是否已经安装了 SQLite。
SQLite version 3.7.15.2
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
如果没有看到上面的结果，那么就意味着没有在 Linux 机器上安装 SQLite。因此，让我们按照下面的步骤安装 SQLite：
请访问 ，从源代码区下载 sqlite-autoconf-*.tar.gz。
步骤如下：
$tar xvfz sqlite-autoconf-3071502.tar.gz
$cd sqlite-autoconf-3071502
$./configure --prefix=/usr/local
$make install
上述步骤将在 Linux 机器上安装 SQLite，您可以按照上述讲解的进行验证。
最新版本的 Mac OS X 会预安装 SQLite，但是如果没有可用的安装，只需按照如下步骤进行：
请访问 ，从源代码区下载 sqlite-autoconf-*.tar.gz。
步骤如下：
$tar xvfz sqlite-autoconf-3071502.tar.gz
$cd sqlite-autoconf-3071502
$./configure --prefix=/usr/local
$make install
上述步骤将在 Mac OS X 机器上安装 SQLite，您可以使用下列命令进行验证：
SQLite version 3.7.15.2
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
最后，在 SQLite 命令提示符下，使用 SQLite 命令做练习。}