<html ng-app="starter">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="list.html" type="text/ng-template">
<ion-view view-title="Search The Movie Database">
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="movie.name" ng-change="searchMovieDB()">
</label>
<ion-list>
<div class="list">
<a ng-repeat="movie in movies" href="#/movie/{{movie.id}}" class="item item-thumbnail-left">
<img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" onerror="this.src = 'https://www.ginesisnatural.com/images/no_image.jpg';">
<h2>{{movie.original_title}}</h2>
<h4>{{movie.release_date}}</h4>
</a>
</div>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="view.html" type="text/ng-template">
<ion-view view-title="Movie details">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="http://files.softicons.com/download/object-icons/movies-icons-by-pinchodesigns/png/32x32/Movie.png">
<h2>{{movie.original_title}}</h2>
<p>{{movie.release_date}}</p>
</div>
<div class="item item-image">
<img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" width="200px" />
</div>
<a class="item" href="#">
Average Vote: <strong>{{movie.vote_average}}</strong> (Votes: {{movie.vote_count}})
</a>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
var nameApp = angular.module('starter', ['ionic']);
nameApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('list', {
url: '/',
templateUrl: 'list.html',
controller: 'ListCtrl'
})
.state('view', {
url: '/movie/:movieid',
templateUrl: 'view.html',
controller: 'ViewCtrl'
});
$urlRouterProvider.otherwise("/");
});
nameApp.factory('Movies', function($http) {
var cachedData;
function getData(moviename, callback) {
var url = 'http://api.themoviedb.org/3/',
mode = 'search/movie?query=',
name = '&query=' + encodeURI(moviename),
key = '&api_key=5fbddf6b517048e25bc3ac1bbeafb919';
$http.get(url + mode + key + name).success(function(data) {
cachedData = data.results;
callback(data.results);
});
}
return {
list: getData,
find: function(name, callback) {
console.log(name);
var movie = cachedData.filter(function(entry) {
return entry.id == name;
})[0];
callback(movie);
}
};
});
nameApp.controller('ListCtrl', function($scope, $http, Movies) {
$scope.$on('$ionicView.loaded', function(){
console.log('View1 - loaded');
});
$scope.$on('$ionicView.enter', function(){
console.log('View1 - enter');
});
$scope.$on('$ionicView.leave', function(){
console.log('View1 - leave');
});
$scope.$on('$ionicView.beforeEnter', function(){
console.log('View1 - beforeEnter');
});
$scope.$on('$ionicView.afterEnter', function(){
console.log('View1 - afterEnter');
});
$scope.$on('$ionicView.beforeLeave', function(){
console.log('View1 - beforeLeave');
});
$scope.$on('$ionicView.afterLeave', function(){
console.log('View1 - afterLeave');
});
$scope.$on('$ionicView.unloaded', function(){
console.log('View1 - unloaded');
});
$scope.movie = {
name: 'Batman'
}
$scope.searchMovieDB = function() {
Movies.list($scope.movie.name, function(movies) {
$scope.movies = movies;
});
};
$scope.searchMovieDB();
});
nameApp.controller('ViewCtrl', function($scope, $http, $stateParams, Movies) {
$scope.$on('$ionicView.loaded', function(){
console.log('View2 - loaded');
});
$scope.$on('$ionicView.enter', function(){
console.log('View2 - enter');
});
$scope.$on('$ionicView.leave', function(){
console.log('View2 - leave');
});
$scope.$on('$ionicView.beforeEnter', function(){
console.log('View2 - beforeEnter');
});
$scope.$on('$ionicView.afterEnter', function(){
console.log('View2 - afterEnter');
});
$scope.$on('$ionicView.beforeLeave', function(){
console.log('View2 - beforeLeave');
});
$scope.$on('$ionicView.afterLeave', function(){
console.log('View2 - afterLeave');
});
$scope.$on('$ionicView.unloaded', function(){
console.log('View2 - unloaded');
});
Movies.find($stateParams.movieid, function(movie) {
$scope.movie = movie;
});
});
.item-image {
background: #000;
}
.item-image img:first-child, .item-image .list-img {
width: 200px;
}