Attempting to develop a basic Angular application for searching names from an array in the controller. Each time the app is executed, encountering the error 'Uncaught ReferenceError: angular is not defined' in the console. Despite researching similar issues online, none seem to address this specific problem.
The HTML code used is as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link type="text/css" rel="stylesheet" href="../app/styles/styles.css"/>
<script src="../scripts/controllers/mycontroller.js"></script>
<a class="header" href="../app/index.html"><h1>App</h1></a>
</head>
<body>
<div class="main-container">
<div id="left"class="main">
<h2>Search by:</h2>
<a href="search-name.html">Name</a><br/><br/>
<a href="search-salary.html">Salary</a><br/><br/>
<a href="search-date.html">Date</a><br/><br/>
</div>
<div ng-controller="MyCtrl" id="middle" class="main">
<h2>Search name</h2>
<div>
<div>
<input type="text" style="color:black;" placeholder="Name here..." ng-model="userSearch">
</div>
</div>
<div>
<div ng-repeat="user in users | filter:userSearch">
<div>
{{user.firstname}} {{user.lastname}}
</div>
</div>
</div>
<button style="color:black;" >Go</button>
</div>
<div id="right" class="main">
<h2>Sidebar</h2>
</div>
</div>
<div id="footer">
<a href="google.com">Link1</a>
<a href="google.com">Link2</a>
<a href="google.com">Link3</a>
<a href="google.com">Link4</a>
<a href="google.com">Link5</a>
</div>
</body>
</html>
Additionally, the script defining the controller is provided below:
'use strict';
var myApp = angular.module('myApp', ['MyCtrl']);
myApp.controller('MyCtrl', function ($scope) {
$scope.users = [
{firstname: 'john', lastname: 'smith'},
{firstname: 'jane', lastname: 'due'},
{firstname: 'bob', lastname: 'rand'}
];
});
Considering my limited experience with Angular, any assistance in resolving this issue would be greatly appreciated. Thank you!