用Ionic可以轻轻松松地在一周的业余时间内打造三个应用——至少我就是这么干的,不过也是为了学习下Cordova + AngularJS。来张应用的Logo,以及Google Play的下载地址,接着让我们开始吧。
在之前的《Ionic框架简介与Ionic Hello World》中我们介绍了如何用Ionic创建一个App。
接着:
1.创建一个side menu
$ ionic start myApp sidemenu
返回
Creating Ionic app in folder /Users/fdhuang/learing/myApp based on sidemenu project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip
[=============================] 100% 0.0s
Update config.xml
Initializing cordova project
Fetching plugin "org.apache.cordova.device" via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.device
npm http 304 http://registry.cordova.io/org.apache.cordova.device
Fetching plugin "org.apache.cordova.console" via plugin registry
npm http GET http://registry.cordova.io/org.apache.cordova.console
npm http 304 http://registry.cordova.io/org.apache.cordova.console
Fetching plugin "com.ionic.keyboard" via plugin registry
npm http GET http://registry.cordova.io/com.ionic.keyboard
npm http 304 http://registry.cordova.io/com.ionic.keyboard
Your Ionic project is ready to go! Some quick tips:
* cd into your project: $ cd myApp
* Setup this project to use Sass: ionic setup sass
* Develop in the browser with live reload: ionic serve
* Add a platform (ios or Android): ionic platform add ios [android]
Note: iOS development requires OS X currently
See the Android Platform Guide for full Android installation instructions:
https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html
* Build your app: ionic build <PLATFORM>
* Simulate your app: ionic emulate <PLATFORM>
* Run your app on a device: ionic run <PLATFORM>
* Package an app using Ionic package service: ionic package <MODE> <PLATFORM>
For more help use ionic --help or visit the Ionic docs: http://ionicframework.com/docs
+---------------------------------------------------------+
+ New Ionic Updates for April 2015
+
+ The View App just landed. Preview your apps on any device
+ http://view.ionic.io
+
+ Invite anyone to preview and test your app
+ ionic share EMAIL
+
+ Generate splash screens and icons with ionic resource
+ http://ionicframework.com/blog/automating-icons-and-splash-screens/
+
2.编译sass
$ ionic setup sass
3.运行
$ionic serve
在index.html中有一个
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
这个告诉了angular我们的app叫starter
,接着我们来看看app.js,首先是一些插件的使用
.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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
在后面,我们会添加一些插件,当页面载入时,就会执行这些函数,如window.cordova.plugins.Keyboard
,则会在有Keyboard插件的时候,执行
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
接着在app.js里有
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent': {
templateUrl: "templates/playlist.html",
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
即,对应的路由、Controller、html模板。Controller对应在controller.js中,一个简化完的Controller是这样的:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
接着我们就可以在手机或者电脑上demo了:
1.添加平台
ionic platform add android
2.运行
ionic run android
从现在起就可以自由自在的hack Ionic.
围观我的Github Idea墙, 也许,你会遇到心仪的项目