Cordova+angularjs+ionic+vs2015开发（四）
欢迎加群学习：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开发（四）的更多相关文章
- Cordova+angularjs+ionic+vs2015开发（三）
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...
- Cordova+angularjs+ionic+vs2015开发（二）
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者Ty ...
- Cordova+angularjs+ionic+vs2015开发（五）
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...
- Cordova+angularjs+ionic+vs2015开发（一）
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...
- Cordova+Angularjs+Ionic 混合开发入门讲解
作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...
- 基于AngularJS/Ionic框架开发的性能优化
AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} ...
- cordova+angularJS+ionic
1.创建项目 2.路由 angular.module("starter",['ionic']) // 依赖 ionic 提供的ui-router .config(function ...
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- VS2015 Cordova Ionic移动开发（三）
一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...
随机推荐
- [NOI2005]维修数列 Splay tree 区间反转,修改,求和,求最值
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1500 Description Input 输入文件的第1行包含两个数N和M,N表示初始时数 ...
- 在virtualbox上安装mac os mavericks遇到Missing Bluetooth Controller Transport问题解决办法
挂载 HackBoot_Mav.iso 作为光驱,启动在 磁盘选择 界面,选择磁盘后按空格键,输入 启动参数 -v -x(-x的意思是安全模式,不这样的话,有蓝牙驱动作怪, 会输出 [IOBlueto ...
- Winform- IrisSkin.dll轻松实现窗体换肤功能
IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现winForm窗体换肤 然而IrisSkin2.dll只能在.NET Faremwork 4.0以及之前的版本使用,所以要在V ...
- ServletContext1
---------------ConfigServlet.java----------- protected void doGet(HttpServletRequest request, HttpSe ...
- MySQL通过RPM安装
以前写过一篇文章,RedHat Linux 6.1 安装MySQL,本文是从解决依赖的角度上再次描述如何在Linux下以RPM包方式安装MySQL. [root@serv01 ~]# ls /iso/ ...
- ASP.NET购物车实现方法
1.可以参考PetShop中的购物车实现方法 2.[经典示例分享]— 商城购物车设计(VS+Access)附源码 http://www.cnblogs.com/wenyang-rio/archive/ ...
- mac os升级为 Yosemite 10.10 后不能创建javaproject
出现这样的情况可能是因为mac系统升级导致JAVA的安装路径发生改变(Xcode升级后也出现模拟器位置改变的情况,不要奇怪) 之前安装的eclipse就自然找不到SDK的路径了,所以会捆绑失败 接下来 ...
- [Practical Git] Clean up commits with git rebase
Sometimes its nice to clean up commits before merging them into your main code repo; in this lesson, ...
- 上struts2的xml在<result type="redirect">参数问题
今天做项目,我遇到了一个精彩的问题. 我需要在struts的xml中的<action>的<result>中配置type="redirect".同一时候须要传 ...
- 基于反射实现自己主动化restful开发
[Author]: kwu 基于反射实现自己主动化restful开发,通用的仅仅须要写查询数据库的sql.并增加相应的javabean实现的高速restful服务的开发. 1.编写数据库的查询sql. ...