ionic开发：第二步

项目创建成功后，正式进入app开发，做一个房屋信息的app。

首先，通过草图画出ui界面

大体布局分为header，content，footer3个部分：

底部footer为tabs ui

ok，先来认识一些ionic里的布局UI：

1.标题栏:ion-header-bar和ion-nav-bar,两者的区别个人理解就是ion-header-bar里的内容一般为原生html元素，不支持路由和导航栈（？）.ion-nav-bar支持这2个特性，更多的是用在返回键。

2.页脚栏 : ion-footer-bar

3.内容区：ion-content

4.滚动框：ion-scroll

5.拉动刷新：ion-refresh 使用指令ion-refresher可以为滚动容器（ion-scroll或ion-content）增加拉动刷新/pull-to-refresh的功能

6.滚动刷新：ion-infinite-scroll

7.tabs：ion-tabs  （在android环境里默认是在top顶部，如果想其bottom底部须$ionicConfigProvider配置下）

.config(function ($ionicConfigProvider) {//android ui风格
        $ionicConfigProvider.tabs.style('standard'); // Tab风格
        $ionicConfigProvider.tabs.position('bottom'); // Tab位置
        $ionicConfigProvider.navBar.alignTitle('center'); // 标题位置
        $ionicConfigProvider.navBar.positionPrimaryButtons('left'); // 主要操作按钮位置
        $ionicConfigProvider.navBar.positionSecondaryButtons('right'); //次要操作按钮位置
    })

8.ion-nav-view ionic能够记录用户的导航历史(可以设置最大缓存数)，能够在导航页面间添加过渡效果。ionic使用的是AngularUI router模块提供了一种强大的state manager，可以和named, nested, and parallel views绑定，允许不止一个模板来渲染页面。另外，不同的state不需要和url绑定，数据会自动更新。
ion-nav-view 是用来渲染视图中的模板的，每个模板是其中的一个状态。不同的state通常在程序中定义映射到一个url。(ion-view 是其子ui)

9.模态对话框: $ionicModal ，模态对话框关闭之前，其他的用户交互行为被阻止。

#fromTemplateUrl创建modal 
$ionicModal.fromTemplateUrl('views/my/login.html',{
            scope:$scope
        }).then(function(modal){
            $scope.modal = modal;
  });
  $scope.modal.show();
  $scope.modal.hide();
//模版视图对应的是<ion-modal-view>

10.弹出框：$ionicPopup  通常用于提醒、警告等，在用户响应之前其他交互行为不能继续。与模态对话框覆盖整个屏幕空间不同，弹出框通常仅占据一部分屏幕空间。

11.loading框：$ionicLoading 

.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };