Cordova, Angular
ContentView, SlideBox, Ionic Loading, Ionic Infinite Scroll, request ajax in Ionic
App folder structure
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
<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
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
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}}°</div> <div class="item">Humidity: {{weather.main.humidity}}%</div> <div class="item">Today's High: {{weather.main.temp_max}}°</div> <div class="item">Today's Low: {{weather.main.temp_min}}°</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
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