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>