码迷,mamicode.com
首页 > 其他好文 > 详细

Ionic简易指南

时间:2015-02-02 17:35:49      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

 1.安装Ionic   

$ npm install -g cordova ionic

2.创建一个项目,(此处以sidemenu为示例)

$ ionic start sidemenu sidemenu  (第一个sidemenu为项目名称,第二个sidemenu为指定的sidemenu初始化示例)   (Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.

3.运行项目

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios  (如果使用的是Genymotion,则此处执行  ionic run ios ,因为ionic 视Genymotion为真机,而非虚拟机)。在浏览器运行执行命令: ionic serve

启动应用程序:

目前为止,我们已经创建了一个新的Cordova项目。接着开始创建一个真正的应用程序!

由于每个Ionic App 基本上是一个web页面,所以要创建一个index.html文件来作为起始页。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
  <body>
  </body>
</html>

通过上面的命令,在我们创建的项目已经包含了Ionic css文件和Ionic核心js文件以及Ionic
AngularJS在ionic.bundle.js文件中的扩展。ionic将ngAnimate和ngSanitize捆绑在一起
但在其他模块中引用时,你需要将它们从 lib/js 角的目录中包含。

 

 

 

 

 

 

 

 

 

本文摘译自 Ionic guide

Ionic简易指南

标签:

原文地址:http://www.cnblogs.com/code-charmer/p/4267928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!