Uncaught ReferenceError: angular is not defined
Question
I am trying to create a simple Angular app to search for names from an array, in the controller. Each time I run the app, I get the eroor 'Uncaught ReferenceError: angular is not defined' in the console. I have looked at similar issues online but nothing seems to cover what I am experiencing.
My HTML is...
<!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>
and the script for my controller is...
'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'}
];
});
I am very new to the Angular framework so please excuse me if my post is stupid.
Help is much appreciated, thanks!
2 answers
solution1
4 2015-05-17 11:55:52
angular is not defined because you never included it.
Add the following before your controller script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Or go to https://angularjs.org/ and find a method of including Angular that works best for you.
solution2
1 2015-05-17 13:03:51
I think this just boils down to a misunderstanding of how AngularJS modules work.
Modules are top-level components for Angular apps that let you organize your code and associate a region of an HTML document. When you create a module it takes up to three arguments:
- The Name of the module
- The set of modules on which the module depends. This is the array that is the second argument where you have incorrectly added your controller name creating a dependency for a module called MyCtrl that doesn't exist.
- The configuration for the module (which is the same as calling module.config).
The mistake you made is that you're trying to pass the controller name into the module. The controller is a second-level component that is tied to your module by calling the module first.
You have already connected the controller to the module by using the variable you defined for module called myApp. In other words, where you have:
myApp.controller('MyCtrl', function ($scope) { ...
you could have just as easily written that as:
angular.module('myApp').controller('MyCtrl', function ($scope) { ...
When you define a module for the first time, must specify a name and the second argument for the dependencies EVEN IF no dependencies exist. So, where you have no dependencies, you just pass an empty array with [ ] . If you do not include the second argument, Angular will look for a module that has already been defined with that name.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.