Blog

Blog

PHODAL

Ionic Android应用开发《程序语言答人》——Hello, Sidemenu

Posted by: Phodal Huang April 4, 2015, 11:10 a.m.

用Ionic可以轻轻松松地在一周的业余时间内打造三个应用——至少我就是这么干的，不过也是为了学习下Cordova + AngularJS。来张应用的Logo，以及Google Play的下载地址，接着让我们开始吧。

Application

Get it on Google Play

Hello,World

在之前的《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.

其他

代码: https://github.com/phodal/learning-ionic


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许，你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构：从入门到微前端》、《自己动手设计物联网》、《全栈应用开发：精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签