My current project involves using the Riot Games API, but this example utilizes the REST Countries API. You can find more information at
The technology stack I am using is MEAN.IO and below you will see a snippet of my code:
test.html
<html ng-app="lolData">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="center" ng-controller="summonerStats">
<form ng-submit="search()">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="summonerName" placeholder="Summoner Name">
<label class="mdl-textfield__label" for="sample1"></label>
</div>
<input class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" value="Search"/>
<p ng-show="show">
{{ mystats.name }}
</p>
</form>
</section>
</body>
</html>
test.js
'use strict';
var lolData = angular.module('lolData', []);
console.log("before controller");
lolData.controller('summonerStats', function($scope, $http) {
var url = "https://restcountries.eu/rest/v1/alpha/co";
console.log("inside controller");
$scope.show = false;
$scope.search = function() {
$http.get(url)
.success(function(response) {
$scope.mystats = response;
$scope.show = true;
console.log("inside success controller");
});
};
});
Upon refreshing the page, the code runs until the "before controller" console.log statement. However, the browser fails to enter the lolData.controller block, resulting in an error displayed in the console.
https://i.sstatic.net/NmMkG.png
Additionally, HTML seems to have issues accepting embedded JavaScript scopes.
https://i.sstatic.net/e0y6Q.png
If anyone has insights on what might be causing these issues, please share.
Update 1:
I've included the index.html file on Codepen: Index.html
Similarly, the Header.html file is available on Codepen as well: header.html