ionic入门demo

首先，引入viewport

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

定义tab栏与左侧滑动栏

//html
 <ion-side-menus>
        <ion-side-menu-content class="calm-bg">
            <ion-nav-bar class="bar-positive">
                <ion-nav-back-button></ion-nav-back-button>
            </ion-nav-bar>
            <ion-tabs class="tabs-positive tabs-icon-top">
                <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="index">
                    <ion-nav-view name="view1"></ion-nav-view>
                </ion-tab>
                <ion-tab title="商城" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" ui-sref="shop">
                    <ion-nav-view name="view2"></ion-nav-view>
                </ion-tab>
                <ion-tab title="个人中心" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="profile">
                    <ion-nav-view name="view3"></ion-nav-view>
                </ion-tab>
            </ion-tabs> 
        </ion-side-menu-content>
        <ion-side-menu side="left" width="150" class="balanced-bg">
            左侧区域
        </ion-side-menu>
    </ion-side-menus>

个人中心页面显示左侧滑动效果。当进入商品详情页面时，隐藏底部的tabs

 myApp.run(function ($rootScope, $state, $ionicTabsDelegate, $ionicHistory, $ionicSideMenuDelegate) {
 //定义进入视图时的事件$ionicView.beforEnter
$rootScope.$on('$ionicView.beforeEnter', function () {
 //进入商品详情页隐藏底部tabs
$ionicTabsDelegate.showBar($state.current.name != 'detail');
 //进入个人中心时，可以向左拉出菜单      $ionicSideMenuDelegate.canDragContent($state.current.name == 'profile')
 if ($state.current.name != 'detail') {
    var views = {},
    viewName = Object.keys($state.current.views)[0]; // 'view2'
    views[viewName] = {
         templateUrl: 'tplDetail',
         controller: 'ctlDetail'
     };
 // {view2:{templateUrl: 'tplDetail', controller: 'ctlDetail'}}

    $ionicHistory.clearHistory();
    $state.replace('detail', {
          url: '/detail/:id',
           views: views
     });
                }

            });
        });

配置路由：

myApp.config(function($stateProvider){
    $stateProvider.state('index',{
        //首页路由
        url:'/index',
        views:{
            view1:{
                templateUrl:"index.html",
                controller:"indexCtrl"
            }
        }
    }).state('shop',{
        //商品路由
        url:"/shop",
        views:{
            view2:{
                templateUrl:"goods.html",
                controller:"goodsCtrl"
            }
        }
    }).state('profile',{
        //个人中心路由
        url:"/profile",
        views:{
            view3:{
                templateUrl:"profile.html",
                controller:"profileCtrl"
            }
        }
    }).state("detail",{
        //商品详情路由，需隐藏底部tab
        url:'/detail',
        views:{
            templateUrl:'detail.html',
            controller:'detailCtrl'
        }
    })

配置控制器：

.controller("myController",["$scope","$state",function($scope,$state){
    //进入和刷新时，始终在进入首页
     $state.go('index')
}])
.controller("indexCtrl",["$scope","$http",function($scope,$http){
                //请求商品数据，可以写入server.js文件中
                $http.get("../api/users/gets").then(function(respon){
                    console.log(respon.data)
                },function(error){
                    console.log(error)
                })
//轮播图部分，需要进行数据请求
$http.get('banner.json').success(function (result) {
$scope.banners = result;
 // 等轮播图数据都加载完之后刷新页面                              $ionicSlideBoxDelegate._instances[0].update();
 //轮播图循环播放                              $ionicSlideBoxDelegate.loop(true);
   });
}])

.controller('ctlDetail', function ($scope, $stateParams, $http) {
//获取id参数
            var id = $stateParams.id;
            $http.get('/api/users/get', {
                params: {
                    id: id
                }
            }).success(function (result) {
                $scope.goods = result.data;
            });
        })

路由文件：

//首页部分
 <script id="tplIndex" type="text/ng-template">
        <ion-view title="首页">
            <ion-content>
                <ion-slide-box delegate-handle="slidebox0" auto-play="true" does-continue="true">
                    <ion-slide ng-repeat="item in banners">
                        <img ng-src="{{item}}"/>
                    </ion-slide>
                </ion-slide-box>
                <ion-list>
                //给商品详情添加id参数，已供detail页面title的显示
                    <ion-item ng-repeat="item in goods" class="item item-thumbnail-left" href="#/detail/{{item.id}}">
                        <img ng-src="{{item.ico}}">
                        <h2>{{item.name}}</h2>
                        <p>{{item.en_name}}</p>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>

//个人商城部分
  <script id="tplShop" type="text/ng-template">
        <ion-view title="商城">
            <ion-content>
                <ion-list>
                    <ion-item ng-repeat="item in goods" class="item item-thumbnail-left" ui-sref="detail">
                        <img ng-src="{{item.ico}}">
                        <h2>{{item.name}}</h2>
                        <p>{{item.en_name}}</p>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-view>
    </script>
//个人中心部分
    <script id="tplProfile" type="text/ng-template">
        <ion-view title="个人中心">
        //点击按钮，出现左侧滑动按钮
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
            </ion-nav-buttons>
            <ion-content>
                个人中心
            </ion-content>
        </ion-view>
    </script>
//商品详情部分
    <script id="tplDetail" type="text/ng-template">
        <ion-view>
        //动态改变标题
            <ion-nav-title>{{goods.name}}</ion-nav-title>
            <ion-content>
                {{goods.name}}
                <hr />
                <div>
                    {{goods.age}}
                </div>
            </ion-content>
        </ion-view>
    </script>