欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！

一、布局

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存储。下篇给一个侧边栏菜单和标签选项卡的案例，作为日后开发的一个基础骨架。

欢迎加群学习：457351423 这里有4000多部学习视频，涵盖各种技术，有需要的欢迎进群学习！

Cordova+angularjs+ionic+vs2015开发（四）的更多相关文章

  1. Cordova+angularjs+ionic+vs2015开发（三）

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...

  2. Cordova+angularjs+ionic+vs2015开发（二）

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者Ty ...

  3. Cordova+angularjs+ionic+vs2015开发（五）

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...

  4. Cordova+angularjs+ionic+vs2015开发（一）

    欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...

  5. Cordova+Angularjs+Ionic 混合开发入门讲解

    作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...

  6. 基于AngularJS/Ionic框架开发的性能优化

    AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...

  7. cordova+angularJS+ionic

    1.创建项目 2.路由 angular.module("starter",['ionic']) // 依赖 ionic 提供的ui-router .config(function ...

  8. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

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

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

随机推荐

  1. Unity3D知识点

    世界空间(World):整个虚拟世界的3d空间,在Unity3d中以米作为单位,如长100米宽100米高100米的立体空间. 屏幕空间(Screen):屏幕2d空间,大小就是屏幕的大小,以像素作为单位 ...

  2. AutoLayout框架Masonry使用心得

    AutoLayout框架Masonry使用心得 字数1769 阅读1481 评论1 喜欢17 我们组分享会上分享了页面布局的一些写法,中途提到了AutoLayout,会后我决定将很久前挖的一个坑给填起 ...

  3. iOS 详解NSXMLParser方法解析XML数据方法

    前一篇文章已经介绍了如何通过URL从网络上获取xml数据.下面介绍如何将获取到的数据进行解析. 下面先看看xml的数据格式吧! <?xml version="1.0" enc ...

  4. RecyclerView全面解析

    写在前面 起深入浅出这名字的时候我是慎重又慎重的,生怕被人骂标题党,写的什么破玩意还敢说深入浅出.所以还是请大家不要抱着太高的期望,因为没有期望就没有失望,就像陈润说的,超预期嘛.全当看小说的心情来看 ...

  5. MFC 学习 之 状态栏的添加

    1.首先声明一个 CStatusBar  m_bar;//声明对象2.然后打开视图资源 String Table中添加两个字段值 3.创建了两个字段值以后,在OnintDialog() 所在的 .cp ...

  6. Parameterized Path 的例子

    Improve the planner's ability to use nested loops with inner index scans (Tom Lane) The new "pa ...

  7. Mac下移动硬盘不能粘贴

    不想格式化,安装 Paragon NTFS 10.0.2 from:http://www.nowmac.com/support/mac/664.html 就可以解决

  8. 【44】将与参数无关的代码抽离templates

    1.template是产生代码的代码,这就意味着源码看起来很少,生成的目标码大量膨胀. 2.考虑,如果两个方法有重复代码,我们会新建一个方法,把重复的代码放进去,原先两个方法调用第三个方法.如果两个类 ...

  9. Android 如何添加一种锁屏方式

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  10. eclipse启动不了报错java was started but returned exit code=13

    http://zhidao.baidu.com/question/1367307106041927459.html http://zhidao.baidu.com/question/570567914 ...