首先环境搭建开(ubuntu14,android):
1.Node.js的安装
sudo apt-get install -y update nodejs
在安装Cordova之前,先确保Node.js已经安装过了,怎么安装Nodejs 网上教程多多
sudo npm install -g cordova
安装Ionic
sudo npm install -g cordova
安装Ionic
sudo npm install -g ionic
创建项目
ionic start todo blank
这时候会在命令行当前目录创建todo这个文件夹,我们进入todo文件夹,我们会看见
$ cd todo && ls
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.
这时候呢,最好有个手机用用,鄙人比较懒,不想太多麻烦
ionic build android
ionic run android
然后你的ionic空项目就创建好了,下面就要进行第一个简单的ionic项目开发了
在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>
添加一个ion-side-menus,在上面的body上
<body>
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>
然后在www/js/app.js中添加如下代码:
angular.module('todo', ['ionic'])
并且在<body>标签总添加:
<body ng-app="todo">
然后可以在浏览器里输入
ionic serve
如果想在手机端测试则输入:
ionic run android