ionic 教程

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

ionic 特点

1.ionic 基于Angular语法，简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生，让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越，运行速度快。

ionic 创建 APP

ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建，所以我们可以创建一个 html 目录，并在目录下创建 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>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
    <script src="cordova.js"></script>
  </head>
  <body>
  </body>
</html>

以上代码中，我们引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 扩展ionic.bundle.js（ionic.bundle.js）。

ionic.bundle.js 文件已经包含了 Ionic核心JS、AngularJS、Ionic的AngularJS扩展，如果你需要引入其他 Angular 模块，可以从 lib/js/angular 目录中调用。

cordova.js 是在使用 Cordova/PhoneGap 创建应用时生成的，不需要手动引入，你可以在 Cordova/PhoneGap 项目中找到该文件，所以在开发过程中显示 404 是正常的。

创建 APP

接下来我们来实现一个包含标题、列表等的应用,设计图如下：

基于ionic和kerkee框架开发-----盛世乐居Hybrid App开发指南

初始化 APP

创建一个新的 AngularJS 模块，并初始化，代码位于 html/app.js 中：

angular.module('todo', ['ionic'])

在 index.html 文件的 <script src="cordova.js"></script> 上面引入 app.js 文件：

<script src="app.js"></script>

修改 index.html 文件 body 标签的内容，代码如下所示：

<body ng-app="todo">
  <ion-side-menus>
    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>
  </ion-side-menus>
</body>

以上步骤我们已经完成了 ionic 基本 APP 的应用。

创建列表

首先创建一个控制器 TodoCtrl：

<body ng-app="todo" ng-controller="TodoCtrl">

在app.js文件中，使用控制器定义列表数据：

angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
  $scope.tasks = [
    { title: 'SSLJ测试一' },
    { title: 'www.sslj.com' },
    { title: 'SSLJ测试二' },
    { title: 'www.sslj.com' }
  ];
});

在index.html页面中数据列表我们使用 Angular ng-repeat 来迭代数据：

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
  </ion-header-bar>
  <ion-content>
    <!-- 列表 -->
    <ion-list>
      <ion-item ng-repeat="task in tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

修改后 index.html body 标签内代码如下：

<body ng-app="todo" ng-controller="TodoCtrl">
    <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
        <!-- 列表 -->
        <ion-list>
          <ion-item ng-repeat="task in tasks">
            {{task.title}}
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content>

    </ion-side-menus>
    <script src="http://www.runoob.com/static/ionic/js/app.js"></script>
    <script src="cordova.js"></script>
</body>

创建添加页面

修改 index.html 在 </ion-side-menus> 后添加如下代码:

<script id="new-task.html" type="text/ng-template">

  <div class="modal">

    <!-- Modal header bar -->
    <ion-header-bar class="bar-secondary">
      <h1 class="title">New Task</h1>
      <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>

      <form ng-submit="createTask(task)">
        <div class="list">
          <label class="item item-input">
            <input type="text" placeholder="What do you need to do?" ng-model="task.title">
          </label>
        </div>
        <div class="padding">
          <button type="submit" class="button button-block button-positive">Create Task</button>
        </div>
      </form>

    </ion-content>

  </div>

</script>

以上代码中我们通过 <script id="new-task.html" type="text/ng-template"> 定义了新的模板页面。

表单提交时触发 createTask(task) 函数。

ng-model="task.title" 会将表单的输入数据赋值给 task 对象的 title 属性。

修改 <ion-side-menu-content> 内的内容，代码如下：

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
  <h1 class="title">Todo</h1>
  <!-- 新增按钮-->
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-compose"></i>
  </button>
</ion-header-bar>
<ion-content>
  <!-- 列表 -->
  <ion-list>
    <ion-item ng-repeat="task in tasks">
      {{task.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu-content>

app.js 文件中，控制器代码如下：

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
  $scope.tasks = [
    { title: 'SSLJ测试一' },
    { title: 'www.sslj.com' },
    { title: 'SSLJ测试二' },
    { title: 'www.sslj.com' }
  ];

  // 创建并载入模型
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

  // 表单提交时调用
  $scope.createTask = function(task) {
    $scope.tasks.push({
      title: task.title
    });
    $scope.taskModal.hide();
    task.title = "";
  };

  // 打开新增的模型
  $scope.newTask = function() {
    $scope.taskModal.show();
  };

  // 关闭新增的模型
  $scope.closeNewTask = function() {
    $scope.taskModal.hide();
  };
});

至此，一个简单的Hybrid App已经基本完成。

SSLJ-APP文件结构目录

示例目录结构如下，请严格按照目录结构建立相关的可视化文件目录

基于ionic和kerkee框架开发-----盛世乐居Hybrid App开发指南

可以看到，整个项目组织结构分为：框架目录、可视化文件结构目录。每个可视化文件结构目录下应有如下分目录或文件：css文件夹（放置该控制器下所有的css样式）、images文件夹（放置该控制器下所有的图片资源）、js文件夹（包含controller文件夹、service文件夹、module文件等）和template文件夹（放置该控制器下所有模板）。

每个controller.js依赖于对应的service.js，而service.js依赖于module.js，而module.js实在main.js中引用的。在index.html中又引用了main.js文件。这样整个项目就通过这根线串联起来。

核心代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-store, must-revalidate"/>
    <meta http-equiv="expires" content="0"/>
    <meta name="format-detection" content="telephone=no" searchtype="map">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <title></title>
    <link href="../ionic/css/ionic.min.css" rel="stylesheet">
    <link href="css/tabs.css" rel="stylesheet">
    <!--<link href="school/css/school.css" rel="stylesheet">-->
    <!--<link href="mine/css/mine.css" rel="stylesheet">-->
</head>
<body>
<!--
  The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>
<!--
  The views will be rendered in the <ion-nav-view> directive below
  Templates are in the /templates folder (but you could also
  have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>

</body>
</html>
<script type="text/javascript">var IsDebug = true;</script>//浏览器调试模式,正式发布时请务必注释
<script type="text/javascript" src="../kerkee.js"></script>//跨平台开发框架,解决跨域问题
<script type="text/javascript" src="../core/require.js" data-main="main.js"></script>
//require.js：在里面可实现模块化开发，可加入相关指令。封装相关方法。不建议改动

解释：

isDebug：浏览器调试模式,正式发布时请务必注释

kerkee.js：跨平台开发框架,解决跨域问题

require.js：在里面可实现模块化开发，可加入相关指令。封装相关方法。不建议改动

以上代码中，我们最终依赖于main.js，我们来看看他的核心代码：

'use strict';
//requirejs通用模块设置
requirejs.config({
    baseUrl: "../../html",
    paths: {
        core: "core",
        api: "core/coreApi",
        deviceInfo: "core/coreApi/device/deviceInfo",//调用原生相关功能
        ionic: "ionic/js/ionic.bundle.min",
        app: "modules/app",
        appController: "modules/appController",
        appService: "modules/appService",
        homeModule: "modules/home/js/homeModule",
        md5: "core/coreApi/device/md5", //调用原生相关功能
        bootstrap: "modules/bootstrap"
    },
    shim: {
        app: {
            exports: "app"
        },
        util: {
            exports: "util"
        },
        deviceInfo: {
            exports: "deviceInfo"
        },
        ionic: {
            exports: "ionic"
        },
        appController: {
            exports: "controllers"
        },
        appService: {
            exports: "services"
        },
        homeModule: {
            exports: "homeModule"
        },
        md5: {
            exports: "md5"
        },
        bootstrap: {
            deps: ["deviceInfo", "ionic"],
            exports: "bootstrap"
        }
    },
    deps: [
        'bootstrap'
    ]
});

以上代码中，我们引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 扩展ionic.bundle.js（ionic.bundle.js）。

ionic.bundle.js 文件已经包含了 Ionic核心JS、AngularJS、Ionic的AngularJS扩展，如果你需要引入其他 Angular 模块，可以从 lib/js/angular 目录中调用。

基于ionic和kerkee框架开发-----盛世乐居Hybrid App开发指南

ionic 教程

ionic 特点

ionic 创建 APP

创建 APP

初始化 APP

创建列表

创建添加页面

SSLJ-APP文件结构目录

相关推荐