一、布局

Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目。本案例将两个布局进行结合，简单介绍下Ionic的布局。Ionic采用自定义标签和标准Html标签相结合。相对于全部使用div方式来说，自定义标签的可读性更强。Ionic的界面呈现既可以使用静态页面方式呈现，也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定。

使用VS创建一个空白的Ionic项目。项目中包含一个index.html页面和app.js的脚本。依照惯例修改项目的基本属性后，打开index.html页面和app.js脚本。

<body ng-app="starter">

    <ion-pane>

        <ion-header-bar class="bar-stable">

            <h1 class="title">Ionic Blank Starter</h1>

        </ion-header-bar>

        <ion-content>

        </ion-content>

    </ion-pane>

</body>

在body标签上有一个自定义的属性ng-app，该属性是Angular用于标识应用程序模块的，一般为程序启动模块。<ion-pane>标签内容为ionic标签，关于Ionic标签请查阅相关文档，这里不再赘述。

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

.run(function ($ionicPlatform) {

    $ionicPlatform.ready(function () {

        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {

            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            cordova.plugins.Keyboard.disableScroll(true);

        }

        if (window.StatusBar) {

            StatusBar.styleDefault();

        }

    });

})

angular.module('starter',[])用于定义应用程序的启动模块，同时加载ionic模块。以上代码是连缀写法，正常写法如下：

angular.module().run().config();

或者：

var app = angular.module();

app.run();

app.config();

这样写，基本阅读起来就没有问题了。

run()方法用于启动运行程序。后续会加入config()等相关方法。

二、路由和控制器

在www目录下创建一个templates文件夹并添加一个home.html空白页面。同时在js文件夹中创建一个controllers.js文件。

修改index.html内容如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title></title>

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

    <link href="css/style.css" rel="stylesheet">

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

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

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

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

    <!--添加controllers引用-->

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

</head>

<body ng-app="starter">

    <!--添加导航视图标签-->

    <ion-nav-view></ion-nav-view>

</body>

</html>

将原来body内容添加到home.html中，并添加一个视图标签：

<ion-view view-title="Home">

    <ion-pane>

        <ion-header-bar class="bar-stable">

            <h1 class="title">标题</h1>

        </ion-header-bar>

        <ion-content>

        </ion-content>

    </ion-pane>

</ion-view>

打开app.js,在run()方法后连缀config()方法，配置内容如下：

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state('app', {

        url: '/app',

        templateUrl: 'templates/home.html'

    });

    $urlRouterProvider.otherwise('/app');

});

这里使用$stateProvider.state()方法声明一个状态（路由）。$urlRouterProvider.otherwise('/app')设置默认路由。上述代码功能是在程序启动时，请求/app的路由，该路由导向home.html视图模板，并将该视图内容渲染到<ion-nav-view>导航视图标签上。

控制器的作用就是在视图渲染前将数据送到视图处理。而数据内容我们可以使用网络请求从服务器上获取，也可以使用本地数据等。

例如上述案例需要在视图渲染之前，动态显示标题，在控制器中处理如下：

打开controllers.js文件，添加如下代码：

angular.module('starter.controllers', [])

.controller('HomeCtrl', function ($scope) {

    $scope.msg = 'Hello';

});

同时修改app.js文件相关配置，完整app.js为内容如下：

angular.module('starter', ['ionic', "starter.controllers"]) //添加控制器模块

.run(function ($ionicPlatform) {

    $ionicPlatform.ready(function () {

        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {

            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

            cordova.plugins.Keyboard.disableScroll(true);

        }

        if (window.StatusBar) {

            StatusBar.styleDefault();

        }

    });

})

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider.state('app', {

        url: '/app',

        templateUrl: 'templates/home.html',

        controller: 'HomeCtrl' //增加控制器处理

    });

    $urlRouterProvider.otherwise('/app');

});

在home.html中就可以使用表达式进行数据绑定了。

<ion-view view-title="Home">

    <ion-pane>

        <ion-header-bar class="bar-stable">

            <!--这里修改为数据绑定，动态上下文中获取-->

            <h1 class="title">{{msg}}</h1>

        </ion-header-bar>

        <ion-content>

        </ion-content>

    </ion-pane>

</ion-view>

angular的绑定表达式使用{{}}这种方式。

结束语：以上就是一个最简单的请求-路由-控制的案例。对于数据的操作一般是放在服务端处理的，手机程序使用$http对象从服务器上获取数据即可。本地数据存储，最简单的方式就是使用json存储。下篇给一个侧边栏菜单和标签选项卡的案例，作为日后开发的一个基础骨架。

VS2015 Cordova Ionic移动开发（四）的更多相关文章

  1. VS2015 Cordova Ionic移动开发（二）

    一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结 ...

  2. VS2015 Cordova Ionic移动开发（三）

    一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...

  3. VS2015 Cordova Ionic移动开发（一）

    一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直 ...

  4. [转]VS2015 Cordova Ionic移动开发（一）

    本文转自:https://www.cnblogs.com/UltimateAvalon/p/5328642.html 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找 ...

  5. VS2015 Cordova Ionic移动开发（五）

    一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...

  6. VS2015+cordova+ionic安装配置

    VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Andro ...

  7. 实践分享：开始用Cordova+Ionic+AngularJS开发App

    http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...

  8. Cordova/Ionic Android 开发环境搭建 - Windows系统

        电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 ...

  9. ubuntu15.10下搭建cordova+ionic开发环境

    安装jdk 在命令下输入java如果没有安装会提示该命令包含于openjdk软件包 sudo apt-get install openjdk然后按下tab会列出openjdk开头的软件包 我这里就选择 ...

随机推荐

  1. 【 UVALive - 4287】Proving Equivalences （SCC缩点）

    题意: 给出N个命题,要求你证明这N个命题的等价性 比如有4个命题a,b,c,d,我们证明a<->b, b<->c,c<->d,每次证明都是双向的,因此一共用了6次 ...

  2. ServletContextListener作用(转)

    ServletContext 被 Servlet 程序用来与 Web 容器通信.例如写日志,转发请求.每一个 Web 应用程序含有一个Context,被Web应用内的各个程序共享.因为Context可 ...

  3. Bluetooth LE(低功耗蓝牙) - 第六部分(完)

    在本系列前面的文章中我们已经了解了,在我们从一个TI SensorTag中获取温度和湿度数据之前,我们需要经历的各种步骤.在本系列中的最后一篇文章,我们将完成注册并接收SensorTag的通知,并接收 ...

  4. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  5. C/S结构与B/S结构的特点分析

    C/S结构与B/S结构的特点分析 为了区别于传统的C/S模式,才特意将其称为B/S模式.认识到这些结构的特征,对于系统的选型而言是很关键的. 1.系统的性能 在系统的性能方面,B/S占有优势的是其异地 ...

  6. 【Objective-C基础教程-读书笔记】第1章 启程

    在第1章里面,作者主要以一种站在世界中心呼唤爱的姿态,给读者们打打鸡血洗洗脑,鼓励大家,投入时间学习Objective-C,值得啊! 首先,Objective-C既能用来开发OS X平台上的APP,又 ...

  7. lightoj 1021 - Painful Bases 状态压缩

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1021 #include<cstring> #include<cstd ...

  8. poj 3687 Labeling Balls【反向拓扑】

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12246   Accepted: 3508 D ...

  9. C# WinForm 透明控件 PictureBox透明 分类： WinForm 2014-07-30 13:27 591人阅读 评论(0) 收藏

    1.要实现C# WinForm中的控件与背景的透明,可以通过设置控件的BackColor属性为Transparent,同时设置其父控件.因为在C#中,控件的透明指对父窗体透明.如果不设置Parent属 ...

  10. 设置UWP程序自启动（Automate launching Windows 10 UWP apps）

    在开发UWP程序的过程中,有时候需要设置程序的自启.本人实现的步骤如下: 1.在VS中激活Protocol (Package.appxmanifest --> Declarations --&g ...