Cordova, Angular

ContentView, SlideBox, Ionic Loading, Ionic Infinite Scroll, request ajax in Ionic

App folder structure

app-constructure

App.js

angular.module('App', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'views/home/home.html'
    }).state('reservation', {
        url: '/reservation',
        controller: 'ReservationController',
        templateUrl: 'views/reservation/reservation.html'
    }).state('weather', {
        url: '/weather',
        controller: 'WeatherController',
        templateUrl: 'views/weather/weather.html'
    }).state('restaurants', {
        url: '/restaurants',
        controller: 'RestaurantsController',
        templateUrl: 'views/restaurants/restaurants.html'
    }).state('tour', {
        url: '/tour',
        templateUrl: 'views/tour/tour.html'
    });

    $urlRouterProvider.otherwise('/tour');
})

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

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">
    <link href="views/tour/tour.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="views/reservation/reservation.js"></script>
    <script src="views/weather/weather.js"></script>
    <script src="views/restaurants/restaurants.js"></script>


  </head>
  <body ng-app="App">
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
          <i class="icon ion-ios-arrow-left"></i> Back
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
  </body>
</html>

 

/view/home/home.html

ionic-app1-home

<ion-view view-title="Nha Trang Resort" hide-back-button="true">
    <ion-content>
    	<div class="list">
			<a href="#/reservation" class="item item-icon-left">
			<i class="icon ion-document-text"></i> See your reservation
			</a>
			<a href="#/weather" class="item item-icon-left">
			<i class="icon ion-ios-partlysunny"></i> Current weather
			</a>
			<a href="#/restaurants" class="item item-icon-left">
			<i class="icon ion-fork"></i> Nearby restaurants
			</a>
		</div>
    </ion-content>
</ion-view>

/views/reservation

Content view list item with icon

ionic-app1-reservation

reservation.html

<ion-view view-title="Reservation">
    <ion-content>
        <div class="list">
            <div class="item item-icon-left">
                <i class="icon ion-key"></i> Room: {{reservation.room}}
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-calendar"></i> Check In: {{reservation.checkin | date:'mediumDate'}}
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-calendar"></i> Check Out: {{reservation.checkout | date:'mediumDate'}}
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-wifi"></i> Wifi Code: {{reservation.wifi}}
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-pricetag"></i> Rate: {{reservation.rate | currency}}/night
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-pricetags"></i> Total: {{reservation.rate * 7 | currency}}
            </div>
        </div>
    </ion-content>
</ion-view>

reservation.js

angular.module('App')
	.controller('ReservationController', ['$scope',function ($scope) {
		$scope.reservation = {
			checkin: new Date(),
			checkout: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7),
			room: 156,
			rate: 121,
			wifi: 'resortwifi'
		};
}]);

/home/weather

Ionic Loading, Request Ajax

ionic-app1-weather

weather.html

<ion-view view-title="Current Weather">
    <ion-content>
        <div class="list">
            <div class="item">Current Conditions: {{weather.weather[0].main}}
            </div>
            <div class="item">Current Temperature: {{weather.main.temp}}&deg;</div>
            <div class="item">Humidity: {{weather.main.humidity}}%</div>
            <div class="item">Today's High: {{weather.main.temp_max}}&deg;</div>
            <div class="item">Today's Low: {{weather.main.temp_min}}&deg;</div>
            <div class="item">Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}
            </div>
        </div>
    </ion-content>
</ion-view>

weather.js

angular.module('App')
    .controller('WeatherController', function($scope, $http, $ionicLoading) {
        var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];

        $ionicLoading.show();
        $http.get('https://ionic-in-action-api.herokuapp.com/weather')
            .success(function(weather) {
                $scope.weather = weather;
                
                $ionicLoading.hide();
            }).error(function(err) {
            	$ionicLoading.show({
					template: 'Could not load weather. Please try again later.',
					duration: 3000
				});
            });

        $scope.getDirection = function(degree) {
            if (degree > 338) {
                degree = 360 - degree;
            }
            var index = Math.floor((degree + 22) / 45);
            return directions[index];
        };
    });

/views/restaurants

Infinite Scroll

ionic-app1-restaurant

restaurants.html

<ion-view view-title="Local Restaurants">
    <ion-content>
        <div class="list card" ng-repeat="restaurant in restaurants">
            <div class="item">
                <h2>{{restaurant.name}}</h2>
                <p>{{restaurant.address}}, {{restaurant.city}}</p>
            </div>
            <div class="item item-image">
                <img ng-src="{{restaurant.image_url}}" />
            </div>
        </div>
        <ion-infinite-scroll on-infinite="getRestaurants()" ng-if="total > page" immediate-check="false"></ion-infinite-scroll>
    </ion-content>
</ion-view>

restaurants.js

angular.module('App')
    .controller('RestaurantsController', function($scope, $http) {
            $scope.page = 0;
            $scope.total = 1;
            $scope.restaurants = [];
            $scope.getRestaurants = function() {
                $scope.page++;
                $http.get('https://ionic-in-action-api.herokuapp.com/restaurants?age=' + $scope.page).success(function (response) {
                    angular.forEach(response.restaurants, function(restaurant) {
                        $scope.restaurants.push(restaurant);
                    }); $scope.total = response.totalPages; $scope.$broadcast('scroll.infiniteScrollComplete');
                }).error(function(err) {
                $scope.$broadcast('scroll.infiniteScrollComplete');
                console.log(err);
            });
        }; $scope.getRestaurants();
    });

/views/tour

Slidebox

tour.css

#tour-view .slider {
    height: 100%;
}

#tour-view .slider-slide {
    padding-top: 100px;
    text-align: center;
}

#tour-view .icon-slide {
    font-size: 20em;
    display: inline-block;
}

tour.html

<ion-view view-title="Welcome to Aloha Resort" id="tour-view">
    <ion-nav-buttons side="right">
        <a class="button button-clear" href="#/home" nav-clear>Start</a>
    </ion-nav-buttons>
    <ion-slide-box show-pager="true">
        <ion-slide>
            <span class="icon icon-slide ion-document-text"></span>
            <h3>See your reservation</h3>
        </ion-slide>
        <ion-slide>
            <span class="icon icon-slide ion-fork"></span>
            <h3>Find local restaurants</h3>
        </ion-slide>
        <ion-slide>
            <span class="icon icon-slide ion-ios-sunny"></span>
            <h3>Get the weather</h3>
        </ion-slide>
    </ion-slide-box>
</ion-view>

Ionic in Action book

 

Ionic 1.x: Navigation and core components

Category: Uncategorized
Tagged with:, , , , ,
0
3933 views

Join the discussion

Your email address will not be published. Required fields are marked *