As a newcomer to Angular, I find myself struggling to navigate the learning curve.
Currently, I am completing a FreeCodeCamp Zipline project to create a Wikipedia search application. One of the key features required is a live search with suggestions for article titles. Unfortunately, I have been unable to get this functionality to work.
I have developed a factory to handle the Wikipedia API call. However, the factory only works once and does not update when changes are made to the search field. It seems that the factory is not being triggered when modifications are made to the input field, despite my attempts to resolve the issue.
HTML
<section id="container" ng-app="wikiSearch" ng-controller="searchPanel" class="center">
<h1>Wikipedia Viewer</h1>
<input id="search" type="text" placeholder="search" ng-model="searchTerm" ng-model-options="{debounce: 300}"/>
<section id="results"><a href="#" target="_blank" class="wiki-entry"> </a>
<!-- test code-->
<div>{{searchTerm}}</div>
<div>{{titleSearch}}</div>
</section>
</section>
Javascript
var app = angular.module('wikiSearch', []);
app.controller('searchPanel', [ '$scope', 'API', function ($scope, API) {
$scope.searchTerm = 'einstein';
$scope.titleSearch = {};
$scope.searchResults = {};
var api_base = "https://en.wikipedia.org/w/api.php?";
var fullParams = "format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=30&prop=extracts&exintro&explaintext&exsentences=2&exlimit=max&gsrsearch="
//var titles = "format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=8&gsrsearch="
var callback = "&callback=JSON_CALLBACK"
API.search(api_base + fullParams + $scope.searchTerm + callback).success(function (data) {
$scope.titleSearch = data;
});
}]);
app.factory('API', [ '$http', function ($http) {
return {
search: function(targetUrl) {
console.log(targetUrl);
return $http.jsonp(targetUrl);
}
}
}]);
To view the original Codepen project and further analyze the issue, click here: Codepen Project
It's apparent that any alterations to the search field do not reflect any changes in the returned JSON data. The factory is called only once.
While I lack a deep understanding of how Angular functions, I had assumed that the factory would update in the scope with each modification to the input field. Clearly, my assumption was incorrect. I would appreciate insights on why this occurs and guidance on how to rectify it.