There can be no Triumph without Loss,No Victory without Suffering,No Freedom without Sacrifice.
All you have to decide is what to do with the time that is given to you.
Get busy Living, or Get busy Dying?
  首页 | 留言给我 | 订阅 Rss | CLI | 黄白之恋 Posts:158   Hits: 1291621    Comments: 168    
 日历归档
<<  <  2018 - 10  >  >>
SuMoTuWeThFrSa
 123456
78910111213
14151617181920
21222324252627
28293031
 About Me
 Name: ZhangSichu
 Sex: Male
 Age: 32
 Email: ZhangSichu@gmail.com
 MSN: ZhangSichu@hotmail.com
 Home: ZhangSichu.com
 WeiBo: weibo.com/zhangsichu
 个人推荐
 分类归档
  ·C++/C(5)  RSS
  ·软件工程(1)  RSS
  ·杂事/随感(26)  RSS
  ·.Net/Java(30)  RSS
  ·面向对象程序设计(5)  RSS
  ·汇编/破解(0)  RSS
  ·平面设计(3)  RSS
  ·SQL(5)  RSS
  ·COM/COM+(2)  RSS
  ·Web开发(81)  RSS
 My Friends
Back Forward Refresh Home 2018年10月23日 星期二 RSS CLI Mine Sweeper. In Javascript.

  Ionic In WebStorm VS Ionic In VS2015
字体大小 [ ]

Ionic是什么? Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文讲讲述在Windows下搭建 Ionic 的开发环境,您可以使用 WebStorm 去开发,也可以使用All In One的 Visual Studio 2015 的Ionic 模板工程去开发。


Ionic in WebStorm

Ionic 的官方文档 http://www.ionicframework.com/getting-started/ 首先安装 Node.js https://nodejs.org/ 然后控制台安装:
npm install -g cordova ionic

Click to Open in New Window

就这简单的一部, ionic就安装好了。

下来创建一个简单的 ionic 应用。
ionic start EverydayBreakfast blank

Click to Open in New Window

有三种默认工程模板:
blank : 空的工程模板
tabs : 分页Tabs工程模板
sidemenu : 左边菜单工程模板

下来可以使用 ionic serve 来启动 测试站点了。
ionic serve

Click to Open in New Window

这里使用 chrome 可以直接使用 chrome 的调试模式,模拟进入 iPhone 的 view
Click to Open in New Window

接下来在 WebStorm 里直接打开这个文件夹,就可以开始基于 ionic 的开发了。
Click to Open in New Window


这里有两个非常好用的东东 一定要推荐一下~~~

1. ng-cordova http://angular-js.in/ng-cordova/ 在你的应用里,需要那个扩展组件,就安装那个组件,非常快捷好用。

2. Chrome 的 SourceCode map 功能,使用这个功能,可以让你大量减少在开发过程中,在浏览器和IDE的切换操作,大大提高开发效率。具体的做法是:
a) 在 Chrome 调试工具的 Source 这一栏,修改 CSS 等代码文件,会提示你添加 workspace
Click to Open in New Window

b) 把工程下的 www 目录直接拖拽到 source 区域里
Click to Open in New Window

c) Chrome 会申请文件访问权限,点击允许
Click to Open in New Window

d) 在拖入的 source code 下面修改 style.css 等源代码文件,会提示你 map source code,点击选择 map 文件。 就可以在 Chrome 直接修改源文件了
Click to Open in New Window

同时你在 ionic 的控制台里也可以看到文件变化
Click to Open in New Window


Ionic in Visual Studio 2015


首先安装 Ionic 的 Visual Studio 2015 的模板: https://visualstudiogallery.msdn.microsoft.com/b26474d5-c14d-4d69-bad5-37954538c506 安装好了以后,在 VS2015 中创建工程的时候你会看到 Ionic 的工程模板。
Click to Open in New Window

然后常规的方法,创建工程,调试并选择设备。开始开发工作。
Click to Open in New Window

VS使用的模拟器是: Web版的,是Ripple提供的。
Click to Open in New Window


总结:Ioinc + WebStorm 比较灵活,更轻量级,不过你要关心的细节比较多。 VS2015 IDE 功能强大,基本不用配置,就可以开始开发工作,同时对 Git 和一键发布等功能集成的比较深入,IDE比较重,但是比较省心。这两种开发环境各有优劣,萝卜青菜各有所爱吧。


最后是使用 ionic 做的一个 App的截图:
Click to Open in New Window
  Posted @ 7/23/2015 1:41:50 PM | Hits (8253) | Comment (0

  Post Comment
标题 *
作者 *
密码 记住我
评论 *
    


Stable in Firefox 1.5 2.0Stable in IE6 IE7Stable in MozillaStable in Netscape
ZhangSichu.com V0.1.7507
Powered By ZhangSichu
Copyright © ZhangSichu
Download ZhangSichu.com source code. Download source code