Here is a snippet of HTML code that allows users to enter a movie title and displays search results. I am looking to add a menu to this page, with links redirecting to different pages such as 'About Us', 'Featured Films', and 'Search Films'.
My goal is to implement the ngRoute feature in Angular to navigate to these pages.
Below is the HTML and JS code I have so far. The JS file currently fetches movie data from the OMDB API, but I want to include ngRoute functionality in my JavaScript.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-route.js"></script>
<script src="script.js"></script>
<title>Movie Search | OMDb API</title>
</head>
<body ng-app="OMDbAPISearch">
<div class="container" ng-controller="searchMovies">
<h1>Search a Movie Title Below</h1>
<p>This application utilizes OMDb API data for all results (<a href="http://www.omdbapi.com" target="_blank">http://www.omdbapi.com</a>)</p>
<form>
<div class="search">
<input id="theSearch" ng-model="searchparam" placeholder="movie name" type="text" ngTrim="true" />
<button ng-click="fetch()">Search</button>
<div class="clear"></div>
</div>
</form>
<div class="results">
<div class="result" movie-srch-results ng-repeat="movie in movieResults"></div>
</div>
<div class="noResults"></div>
</div>
</body>
</html>
I would like to incorporate ngRoute into my JavaScript file through a new menu called 'Pages' featuring options like 'About Us', 'Features Films', etc.
Any assistance on integrating ngRoute into my JS file would be greatly appreciated.
(function(angular) {
'use strict';
angular.module('OMDbAPISearch', [])
.controller('searchMovies', ['$scope', '$http',
function($scope, $http) {
$scope.method = 'GET';
$scope.fetch = function() {
if ($scope.searchparam) {
$scope.url = 'https://www.omdbapi.com/?s=' + $scope.searchparam + '&type=movie&r=json';
$http({
method: $scope.method,
url: $scope.url
}).
then(function(response) {
if (response.data.Response) {
// success
$('.results').css('display', 'block');
$('.noResults').css('display', 'none');
var theSrchResults = response.data["Search"];
angular.forEach(theSrchResults, function(obj) {
// loop through each movie, and pull the details using the IMDB ID
$http({
method: $scope.method,
url: 'https://www.omdbapi.com/?i=' + obj.imdbID + '&plot=full&r=json&tomatoes=true'
}).
then(function(response) {
// extend the details to the parent
obj.details = response.data;
});
});
$scope.movieResults = theSrchResults;
} else {
//error, movie not found
console.log("not found");
$('.results').css('display', 'none');
$('.noResults').css('display', 'block');
$('.noResults').html("<strong>No results found.</strong>");
}
}, function(response) {
console.log("failure");
$('.results').css('display', 'none');
$('.noResults').css('display', 'block');
$('.noResults').html("<strong>Network or data error, please try again.</strong>");
});
} else {
// no input value
$('.results').css('display', 'none');
$('.noResults').css('display', 'none');
$('#theSearch').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
}
};
}
])
.directive('movieSrchResults', function() {
return {
templateUrl: 'movieResults.html'
};
});
})(window.angular);
If anyone has guidance on how to integrate ngRoute into my JS file, please reach out. Thank you!