简介onic除了提供css框架以外，参看ionic中文详解CSS组件,还是提供了javascript UI库。许多组件都是需要通过javascript来产生比较炫的效果。ionic遵循了mvc的设计模式，这一点可以通过通过创建tab栏的官方例子项目来体会view之间的控制与切换。下面就是关于ionic的中文javascript API介绍。其实官方已经写的比较详细了，只是国内访问网速不好的地方，那个js菜单栏一直展不开，加载慢，所以自己做一个中文的，方便以后查找。内容比较长，参看：教程索引：(持续更新)
转载请注明出处：
Popover$ionicPopover, 参看接着讲解的 ionicPopover 控制器。这个控件和上篇中讲到的ionicModal 内容基本一致。popover是浮动在用户app内容之上的view视图，很方便的用来展示或收集用户信息，主要用于：
展示当前view视图的更多信息选择一个常用的工具或配置展现一个app视图中的动作列表把要显示在popover中的内容放在元素中即可。用法：12345678910111213141516171819202122232425262728293031323334353637383940&p&
&button ng-click=&openPopover($event)&&Open Popover&/button&&/p&&script id=&my-popover.html& type=&text/ng-template&&
&ion-popover-view&
&ion-header-bar&
&h1 class=&title&&My Popover Title&/h1&
&/ion-header-bar&
&ion-content&
&/ion-content&
&/ion-popover-view&&/script&angular.module(&testApp&, [&ionic&]).controller(&MyController&, function($scope, $ionicPopover) {
$ionicPopover.fromTemplateUrl(&my-popover.html&, {
scope: $scope,
}).then(function(popover) {
$scope.popover =
$scope.openPopover = function($event) {
$scope.popover.show($event);
$scope.closePopover = function() {
$scope.popover.hide();
//Cleanup the popover when we&re done with it!
$scope.$on(&$destroy&, function() {
$scope.popover.remove();
// Execute action on hide popover
$scope.$on(&popover.hidden&, function() {
// Execute action
// Execute action on remove popover
$scope.$on(&popover.removed&, function() {
// Execute action
});});
API 方法：
1234567fromTemplate(templateString, options), 返回ionicPopover的控制器实例----templateString, 类型string，modal中显示的内容。----options，类型object，传递给 $ionicPopover 初始化方法的参数-------------------------------------------fromTemplateUrl(templateUrl, options)，返回 ionicPopover 的控制器实例中用到的promise对象----templateString, 类型string，modal中显示的内容url。----options，类型object，传递给 $ionicPopover 初始化方法的参数
ionicPopover由$ionicPopover 服务调用，当你不需要popover 的时候，要及时调用remove()方法以避免发生内存泄漏。注意：popover 会从它自身的scope中广播’popover.shown’, ‘popover.hidden’, 和’popover.removed’事件，把这个作为传递事件参数的一部分。移除popover时会调用popover.removed 和 popover.hidden 这两个事件。
123456789101112initialize(options), 创建一个新的modal控制器实例----options，类型object，可选值：-------------{object=} 父scope，默认在$rootScope下创建独立的scope-------------{string=} 显示或隐藏的动画效果. 默认是&slide-in-up&-------------{boolean=} 是否让popover的第一个输入获得焦点，默认是false.-------------{boolean=} 点击背景的是否自动关闭popover，默认是 true-------------{boolean=} 是否可以使用手机的硬件返回按钮关闭popover，默认: true.show($event)，显示popover，返回popover 显示后的promise对象------$event，这个popover对齐的event或target元素hide(), 隐藏popover，返回popover 隐藏后的promise对象remove()，从dom中移除popover 实例，并clean，返回popover 移除后的promise对象isShown(), 返回boolean，表示当前popover 是否显示
platform$ionicPlatform , 参看本篇utility中介绍的 ionic.Platform.用于检测当前的系统平台。比如处理绑定某些android手机上有硬件返回按钮的事件。API 方法：12345678910111213onHardwareBackButton(callback), 当点击系统物理按键时绑定的方法----callback，类型function，绑定的回调方法offHardwareBackButton(callback)，移除绑定在点击物理按键的回调方法----callback，类型function，已经绑定的方法registerBackButtonAction(callback, priority, [actionId])，给物理按键绑定一个action动作，当点击物理按键时，实际上只会执行一个action，所以这里会指定优先级参数。例如当显示actionsheet的时候，点击物理返回按键，这时候应该关闭这个actionsheet，而不应该退出程序，或者关闭其他的modal。返回是一个function函数，当调用这个返回函数时，会解除绑定的回调。----callback，类型function，绑定的回调方法----priority，类型number，优先级，只会执行优先级最高的方法----actionId（可选），绑定这个回调对应的id，默认是随机生成的唯一的idon(type, callback)，增加Cordova 事件监听器，比如pause, resume, volumedownbutton, batterylow, offline, 等等。更多信息，参考[Cordova&s event documentation](https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html#Events ). 返回function函数，调用这个返回函数可以移除注册的监听器。----type, 类型string，Cordova 事件类型----callback，类型function，监听函数ready([callback])，当设备ready时候触发的事件。当设备已经ready时，会立马触发这个函数。返回一个promise对象，设备ready时候用到。----callback，类型function，监听函数
Popupionic popup服务允许通过程序创建一个popup弹出的窗口，需要用户交互才可以继续。popup支持原生的 alert(),prompt(),confirm() 这些弹出窗口，也支持可定制内容和样式的弹出框。popup中的input可以增加autofocus属性，这样当弹出对话框时，会自动是这个input获得焦点。用法：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859angular.module(&mySuperApp&, [&ionic&]).controller(&PopupCtrl&,function($scope, $ionicPopup, $timeout) {// Triggered on a button click, or some other target$scope.showPopup = function() {
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: &&input type=&password& ng-model=&data.wifi&&&,
title: &Enter Wi-Fi Password&,
subTitle: &Please use normal things&,
scope: $scope,
buttons: [
{ text: &Cancel& },
text: &&b&Save&/b&&,
type: &button-positive&,
onTap: function(e) {
if (!$scope.data.wifi) {
//don&t allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.
myPopup.then(function(res) {
console.log(&Tapped!&, res);
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 3000); }; // A confirm dialog $scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: &Consume Ice Cream&,
template: &Are you sure you want to eat this ice cream?&
confirmPopup.then(function(res) {
if(res) {
console.log(&You are sure&);
} else {
console.log(&You are not sure&);
}); }; // An alert dialog $scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: &Don\&t eat that!&,
template: &It might taste good&
alertPopup.then(function(res) {
console.log(&Thank you for not eating my delicious ice cream cone&);
}); };});
API 方法：
show(options), 显示一个复杂的popup弹出框。复杂的弹出框，可以设置一个buttons数组，里面每个button可以设置text属性，type属性和onTap事件，而系统默认在点击按钮时，会关闭对话框并返回结果到promise对象中，如果你不想关闭对话框，可以在onTap事件函数中调用event.preventDefault()。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。—-options， 类型是object，参考示例如下：
12345678910111213141516171819202122{
title: &&, // String. The title of the popup.
subTitle: &&, // String (optional). The sub-title of the popup.
template: &&, // String (optional). The html template to place in the popup body.
templateUrl: &&, // String (optional). The URL of an html template to place in the popup
scope: null, // Scope (optional). A scope to link to the popup content.
buttons: [{ //Array[Object] (optional). Buttons to place in the popup footer.
text: &Cancel&,
type: &button-default&,
onTap: function(e) {
// e.preventDefault() will stop the popup from closing when tapped.
e.preventDefault();
}, {
text: &OK&,
type: &button-positive&,
onTap: function(e) {
// Returning a value will cause the promise to resolve with the given value.
return scope.data.
}]}
alert(options)，警告弹出框，显示一段信息，和一个按钮，点击按钮可以关闭弹出框。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。——options，类型object，配置弹出框的参数。12345678{
title: &&, // String. The title of the popup.
subTitle: &&, // String (optional). The sub-title of the popup.
template: &&, // String (optional). The html template to place in the popup body.
templateUrl: &&, // String (optional). The URL of an html template to place in the popup
okText: &&, // String (default: &OK&). The text of the OK button.
okType: &&, // String (default: &button-positive&). The type of the OK button.}
confirm(options)，弹出一个comfirm对话框，点击ok按钮返回true，点击cancel返回false的promise对象。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。——options，类型object，显示confirm对话框的参数。例子：
12345678910{
title: &&, // String. The title of the popup.
subTitle: &&, // String (optional). The sub-title of the popup.
template: &&, // String (optional). The html template to place in the popup body.
templateUrl: &&, // String (optional). The URL of an html template to place in the popup
cancelText: &&, // String (default: &Cancel&). The text of the Cancel button.
cancelType: &&, // String (default: &button-default&). The type of the Cancel button.
okText: &&, // String (default: &OK&). The text of the OK button.
okType: &&, // String (default: &button-positive&). The type of the OK button.}
prompt(options),显示一个带有输入框，ok按钮，cancel按钮的对话框。点击ok时，返回的promise对象中包含输入的值，点击cancel时，值为undefined。返回的promise对象有个close方法，可以在程序中调用这个方法来关闭弹出框。使用例子：
12345678$ionicPopup.prompt({
title: &Password Check&,
template: &Enter your secret password&,
inputType: &password&,
inputPlaceholder: &Your password& }).then(function(res) {
console.log(&Your password is&, res); });
—— options, 类型object，配置对话框参数。示例：
123456789101112{
title: &&, // String. The title of the popup.
subTitle: &&, // String (optional). The sub-title of the popup.
template: &&, // String (optional). The html template to place in the popup body.
templateUrl: &&, // String (optional). The URL of an html template to place in the popup
inputType: // String (default: &text&). The type of input to use
inputPlaceholder: // String (default: &&). A placeholder to use for the input.
cancelText: // String (default: &Cancel&. The text of the Cancel button.
cancelType: // String (default: &button-default&). The type of the Cancel button.
okText: // String (default: &OK&). The text of the OK button.
okType: // String (default: &button-positive&). The type of the OK button.}
scrollion-scroll 创建一个可以容纳所有内容，滚动的容器。
用法：123&ion-scroll zooming=&true& direction=&xy& style=&width: 500 height: 500px&&
&div style=&width: 5000 height: 5000 background: url(&https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg&) repeat&&&/div& &/ion-scroll&
注意：设置scroll box的高度和内部内容的高度很重要，这样才可以让滚动区域随意滚动显示。API 参数：
12345678910111213delegate-handle(optional), string,控制这个scroll view的委托实例$ionicScrollDelegatedirection(optional),string,滚动的方向. &x& or &y& or &xy&. 默认是 &y&.属性：locking（可选）,类型boolean，是否锁定一次只能滚动一个方向属性:padding（可选），类型boolean，是否给content增加padding，iOS默认为true，android默认为false属性：scroll（可选），类型boolean，是否允许滚动内容，默认是true属性：on-scroll，类型：expression，滚动内容时执行的表达式属性：on-refresh，类型：expression，下拉刷新时调用，由ionRefresher 触发。属性：scrollbar-x，类型boolean，是否显示x轴滚动条属性：scrollbar-y，类型boolean，是否显示y轴滚动条属性：zooming，类型boolean，是否支持手势缩放属性：min-zoom，类型integer，最小缩放比例，默认是0.5属性：max-zoom，类型integer，最大缩放比例，默认是3属性：has-bouncing，类型：boolean，是否允许滚动时弹跳超过内容体的边界，ios默认true，Android默认false
ion-infinite-scrollionContent 和 ionScroll 中共有的子元素。ionInfiniteScroll 允许你在用户滚动到内部内容的边缘时调用一个回调函数。当用户滚动内容距离底部小于distance定义的距离时，会自动调用on-infinite中定义的回调函数，可以加载更多内容，加载完更多内容后，在控制器中需要广播croll.infiniteScrollComplete 事件。使用实例：
12345678910111213141516171819202122&ion-content ng-controller=&MyController&&
&ion-list&
&/ion-list&
&ion-infinite-scroll
on-infinite=&loadMore()&
distance=&1%&&
&/ion-infinite-scroll&&/ion-content&function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get(&/more-items&).success(function(items) {
useItems(items);
$scope.$broadcast(&scroll.infiniteScrollComplete&);
$scope.$on(&$stateChangeSuccess&, function() {
$scope.loadMore();
});}
当没有更多内容加载时，停止infinite scroll的方法是使用ng-if指令12345&ion-infinite-scroll
ng-if=&moreDataCanBeLoaded()&
icon=&ion-loading-c&
on-infinite=&loadMoreData()&&&/ion-infinite-scroll&
API 参数：12345on-infinite, 类型expression，当滚动到底部时候的调用函数distance（可选），类型string，定义距离底部多少时调用on-infinite定义的表达式，默认是：1%icon（可选），类型string，定义加载过程中显示的图标，默认是‘ion-loading-d&$ionicScrollDelegate
谢谢！转载请注明出处：
有问题请留言。T_T
皓眸大前端开发学习1996人阅读
1：判断当前设备是否ios/andriod：
&script type=&text/javascript&&
var u = navigator.userA
var isAndroid = u.indexOf('Android') & -1 || u.indexOf('Adr') & -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);
2：在ion-content中，由于scorll 更新了页面数据后不能拖动到底部，html页面不能完全加载，原因在于当前页面没有更新size，解决方法引入$ionicScrollDelegate；
在controller里改变高度的地方调用方法：
$ionicScrollDelegate.
//自定义搜索框
&&& &div class=&bar bar-header item-input-inset& style=&&&
&&& &i class=&icon ion-android-search& style=&position:color: #font-size: 1.4top: 0margin-left: 4& ng-click=&searchSelect()&&&/i&
&&& &div style=&background-color:#border-radius: 10width: 120%;&&
&&&&& &label class=&item-input-wrapper& id=&search-input& style=&background-color: #202020;margin:1px 1px 1px 1border-radius: 10px&&
&&&&&&& &input style=&padding-top: 0padding-bottom: 2margin-left:8color:#c4c7ca& type=&search& placeholder=&大家都在搜...& id=input1 ng-model=&NO01&&
&&&&& &/label&&/div&
&&&&& &!-- &button class=&button button-clear& style=&color: #fefdfb& ng-click=&searchSelect()&&GO&/button& --&
&&& &/div&
3：上拉（或者当前页数据不足一页时）无限请求：
//html代码
&ion-list&
&ion-item class=&& ng-repeat=&item in items track by $index &&{{item.something}}&/ion-item&
&ion-item&&p style=&text-align:& ng-if=&!noMore&&加载中。。。。。&/p&&p style=&text-align:& ng-if=&noMore&&已加载全部数据。。。。。&/p&&/ion-item&
&&& &/ion-list&
&&& &ion-infinite-scroll on-infinite=&loadmore();& icon=&ion-load-a& ng-if=&!noMore& distance=&25px& &&/ion-infinite-scroll&
&&&&&&& &/ion-content&
$scope.loadmore = function(){
$http(mypost)&&&&&&& //mypost为http头
.success(function(data){if (data.length&1) {
&&& console.log('到底了');
&&& $scope.noMore=
&&& $scope.noMore=
& $scope.items = $scope.items.concat(data);
& console.log('data：',data);
}).error(function(err){
& console.log(err);
4：设置ng-repeat=&item in items&循环数组显示的最大值（小于items.length）：
设置过滤器 limitTo:
如：ng-repeat=&item in items|limitTo:10“;
5:js时间：
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
//倒计时，需要注入$interval，参考一篇关于倒数60秒重新发送验证码的文章： http://www.codesec.net/view/406326.html
& var interval = 1000;
function ShowTime(year,month,day,ho,mi,se)
var now = new Date();
var endDate = new Date(year, month-1, day,ho,mi,se);
var leftTime=endDate.getTime()-now.getTime();
var leftsecond = parseInt(leftTime/1000);
var day1=Math.floor(leftsecond/(60*60*24));
var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
console.log(day1,'天',hour,'小时',minute,'分钟',second,'秒');
var timer = $interval(function(){
& ShowCountDown(,17,0,0);
7:有顶部tabs的页面（也带底部tabs）跳转到二级页面返回出现顶部tabs不能置顶的情况：在顶部tabs上方空出了一段nav-bar大小的空白
//需要指定class
&ion-tabs class=&tabs-striped tabs-top tabs-color-stable&& ng-class=&{'tabs-item-hide': $root.hideTabs}&&
8：splash screen 在andriod中失效，显示黑屏：（该问题解决方案来着：/p/1eek75z.html ；原文中还提及content阻尼弹回效果，controller传值，安卓版本发布等多个问题的解决方案！）
主视图容器ion-nav-view是空的，而它的背景色是#000，所以修复方法是给里面塞个ion-view：
&!-- 内容 --&
&ion-nav-view&
&!-- 防止启动时黑屏 --&
&ion-view&&/ion-view&
&/ion-nav-view&
或者添css，把ion-nav-view的背景色改成白色。但问题还没解决，黑屏问题变成白屏问题了，解决方案比较麻烦
把splashscreen插件降级到v2.0.0
v2.0.0之后的版本有bug，目前（）自带的版本是v3.0.0。先cd到项目文件夹，然后命令行：
// 删掉现有版本
cordova plugin rm cordova-plugin-inappbrowser
// 安装v2.0.0
cordova plugin add cordova-plugin-inappbrowser
改配置文件MyApp/config.xml
&preference name=&SplashScreen& value=&screen&/&
&preference name=&AutoHideSplashScreen& value=&false&/&
&preference name=&auto-hide-splash-screen& value=&false&/&
&preference name=&ShowSplashScreenSpinner& value=&false&/&
&preference name=&SplashMaintainAspectRatio& value=&true& /&
&preference name=&SplashShowOnlyFirstTime& value=&false&/&
&preference name=&SplashScreenDelay& value=&10000&/&
取消自动隐藏（改为代码控制隐藏），把持续时间改为较大的值（10秒），设置每次打开应用都显示splash screen
P.S.默认只有SplashScreen和SplashScreenDelay，需要把其它的（SplashMaintainAspectRatio可选）都添上
手动隐藏splash screen，在run里面添上
.run(['$rootScope', function($rootScope) {
// $rootScope.isLoading =
// hide splash immediately
if(navigator && navigator.splashscreen) {
navigator.splashscreen.hide();
9：ionic andriod机型部分视频无法在video标签播放
// 可以通过iframe标签实现
&iframe ng-src=&{{targetUrl}}& height=&240px& width=&100%& autostart=&false& ng-if=&isAndroid&&&/iframe&
&&&&& &video width=&100%& height=&240& ng-if=&!isAndroid& ng-src=&{{targetUrl}}& controls&&/video&
10:跟着上面，在获取请求来的视频不能播放，打印问题是&Error: [$interpolate:interr] Can't interpolate: {{item.videostr}} Error:&[$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.& URL: ....
解决方法是在controller中引入$sce,
然后转换 videourl=$sce.trustAsResourceUrl(videourl);
//在cordova开发中如果出现&ERROR Internal navigation rejected - &allow-navigation& not set for url='xxx' 错误。(白名单)
&在config.xml文件中配置 &
&href=&*&&
12.设置了ng-if 后部分Android机型还是不能显示slide-box里新加载的图片及内容的问题
//& 实测在低版本Android机型上，使用了ng-if还是不能加载 ng-repeat出来的新加载的内容图片
//解决方案：在控制器引入$IonicSlideBoxD
在完成get/post请求获取服务器图片内容后& 执行 & $ionicSlideBoxDelegate.update();
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12061次
排名：千里之外
原创：12篇
(1)(1)(1)(2)(4)(2)(1)(3)web学习笔记08-Ionic的前后端简单交互与打包 - 简书
web学习笔记08-Ionic的前后端简单交互与打包
Ionic的前后端简单交互与打包
前言：这篇文章同样是新手专用，对于一个像我一样的前端渣新来说，看看还可以，大神的话就算啦。里面涉及的点都不算太难，虽然我也有一堆东西没懂，但是跟着先敲起来，慢慢地就会理解了。这个之后还做了一个angular的前后端简单交互，道理都一样，只是pc端会出现跨域问题，需要配置一下nginx的反向代理之类的。本篇就不说这些了，因为做这个的时候没遇到这些问题，遇到的是一些网络权限的问题，在下面也都提了。
1.实现目标
目标是搭建一个简单的前后端交互，应用ionic实现一个简单的表单，点击提交按钮，会发送一个请求，并且能在搭建的后端处查看到提交表单上的值。如图：
2.页面搭建
前提：已安装node.js，ionic，cordova。
安装node.js可以去官网下载，下载完node.js之后可以使用集成包管理工具npm安装剩下的两样（全局安装）。
$ npm install -g cordova ionic
2.1 创建ionic空模板项目
在终端，进入搭建工程的目录
$ cd /Users/apple/Desktop/
下载ionic空模板
$ ionic start ionicTest blank
下载成功之后，进入工程。
其中www是我们主要编写代码的文件夹。这时候我们在终端运行
$ cd /Users/apple/Desktop/ionicTest/
$ ionic serve
会编译生成页面，在浏览器中显示如下图：
这就是ionic的空模板，所以展示出来的是空页面。
2.2 编写代码
1 编写页面html代码
进入/www/index.html。在body中的标签 &ion-content&&/ion-content&之间，写下如下页面代码。
&div class="row1"&
&div class="inner_box"&
&div class="title_msg"&版本号 :&/div&
&input class="input_text" type="text" name="name" id="name" placeholder="请输入姓名"&
&div class="row1"&
&div class="inner_box"&
&div class="title_msg"&编码方式 :&/div&
&input class="input_text" type="text" name="age" id="age" placeholder="请输入年龄"&
&div class="row1"&
&div class="button_box"&
&input type="submit" value="提交" class="submit_btn"&
结果如图：
2 编写css样式
&style type="text/css"&
.inner_box{
width: 310
height: 40
background-color:
border-radius: 5
width: 98%;
height: 40
margin-top: 5
padding: 0;
.title_msg{
width: 100
margin-left: 5
height: 40
text-align:
font-size: 14
line-height: 40
color: #333;
.input_text{
padding: 0px !
width: 200
height: 26px!
margin-top: 7
border: 1px solid #dddddd !
border-radius: 5
font-size: 14
line-height: 26
.button_box{
width: 200
height: 40
.submit_btn{
padding: 0px !
width: 150
height: 30
margin-top: 5
margin-left: 25
border: 1px solid lightblue !
border-radius: 5
background-color:
color: #333333;
这里提一嘴：css中用了不少!important的原因是因为ionic里面很多东西的样式都有初始设定，所以很多时候需要强制设定下。我写css也没几天，不知道这种方式算不算对，要是大家有好的解决办法，一定要告诉我。
结果如图：
3 添加form标签
&form action="http://192.168.1.100:3000/Info" method="post" onsubmit="return submitForm();"&
其中submitForm()方法是点击提交按钮的时候先触发的方法。在这个方法中进行一些验证或者判断是否为空值。action之后接的是需要将表单上的内容发送到的地址。这里就用本机ip地址来吧。
4 添加逻辑代码，如果输入框为空，就弹出提示框。
&script type="text/javascript"&
function submitForm(){
var name = document.getElementById("name");
var age = document.getElementById("age");
if(name.value == null || name.value == ""){
alert("请输入姓名");
if(age.value == null || age.value == ""){
alert("请输入年龄");
以上基本上就搭建好了界面，现在需要的是搭建一个后台服务，来接受发送的请求。
3.服务搭建
在这里为了简便，我们所使用的是express来搭建，express是基于node.js平台，快速，开放，极简的web开发框架。
1 创建server文件
进入工程目录的www文件夹下，创建server.js文件
2 安装express组件
$ npm install express --save
此外还需要安装express的中间件bodyParser。因为不知名的原因，express里没有包括bodyParser。bodyParser用来解析表单提交的数据。
$ npm install body-parser --save
3 编写代码（按照官网的教程写）
var express = require('express');
var bodyParser = require('body-parser');//引入
var app = express();//创建实例
var router = express.Router();
app.use(bodyParser.json());
app.use(require('body-parser').urlencoded({extended: true}));
//请求时开始使用的方法
router.use(function(req, res, next) {
//请求返回的方法
router.post('/Info', function (req, res) {
res.send('Got a POST request');
console.log(req.body);
app.use(router);
app.listen(3000); //指定端口并启动express web服务
编译前端：
$ ionic serve
启动后台服务：
$ node server.js
在页面输入姓名，年龄。
成功的话会出现后台我写的返回报文。这个时候在终端上看，后台打印的内容，会发现如下图：
表单提交的内容都已经在后台显示出来。这样就完成了自建前后端简单的交互。
1. 添加设备
$ ionic platform add ios
$ ionic platform add android
一般项目都需要两个平台同时部署，所以我们就添加两个，执行完毕之后执行命令查看你已经添加的平台列表：
$ ionic platform list
Installed platforms:ios 4.1.1，android ~5.2.0
Available platforms: amazon-fireos ~3.6.3 (deprecated)，blackberry10 ~3.8.0，browser ~4.1.0，firefoxos ~3.6.3，osx ~4.0.1，webos ~3.7.0
在终端进入工程目录下，进行编译
$ ionic build ios
开始编译项目，编译完成之后代开Xcode，打开platform-&ios-&myIonic.xcodeproj的项目文件，Xcode中选择要运行的模拟器版本并执行快捷键cmd+R运行模拟器，模拟器打开后会自动运行你应用。
输入姓名年龄，点击提交，这个时候会报错：
ERROR Internal navigation rejected - &allow-navigation& not set for url='http://192.168.14.102:3000/Info'
出现这个错误的原因是因为没有设置白名单，iOS9+会拒绝请求。
所以解决方案也很简单。只需要在ios -& ionicTest -& config.xml中配置
&allow-navigation href="*" /& //即允许跳转到任意http协议的页面
这样就成功解决这个问题，接下来重新运行，就通畅了。
2.2 打包ipa包
在Xcode中，模拟器选择Generic iOS Device
在顶部导航栏上的product中选择Archive进行打包，接下来的选择根据不同的需要选择不同的选项，我这里选择的是测试包。
Export -& Save for Ad Hoc Deployment -& select a Development Team -& Export one app for all compatible devices -& next -& Export到指定文件夹下。
以上就是打包iOS包的方法和遇到的一些小问题。
安卓模块不是我负责的，我也就没有花太多精力去详细研究，一些配置什么的也就大概说下，具体的配置项需要自己根据自己所处的环境进行配置。我就不赘述了。3.1 配置环境
1.安装Java的JDK，并配置好环境变量。
2.安装工程需要版本的AndroidSDK，并配置好环境变量；这里JDK和andriodSDK的安装和配置都很重要，必须安装好JDK和AndroidSDK，才可以进行下面的打包，否则是打不了包的。
在终端进入工程目录下，进行编译
$ ionic build android
注意：这里会提示你安装部分版本的Android SDK，按照上面的步骤跟着安装就可以，之后重新编译一下。
编译之后可以选择在模拟器上运行或者是在真机上运行。（需要先新建虚拟机/连接手机，新建方法：打开Android SDK安装目录下的AVD Manager.exe选择新建）
$ ionic run android
同样，iOS中出现的问题，Android也出现了。
只需要在platform -& Android-& AndroidManifest.xml中，添加上以下一些权限设置的代码即可：
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&uses-permission android:name="android.permission.INTERNET" /&
&uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&
&uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /&
&uses-permission android:name="android.permission.READ_LOGS" /&
以上就是整个Ionic的前后端简单交互与打包了。项目要是有需求的话可以评论留言跟我要。不过这个项目比较简单，跟着一步一步走很快就可以搞定的。要是大家在这里发现什么问题，请私信或者评论告诉我，让我也学习学习。
iOS萌新，web纯新，入门厨子，手工爱好者，吐槽专家。