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">Link1</a>
<a href="google">Link2</a>
<a href="google">Link3</a>
<a href="google">Link4</a>
<a href="google">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!
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.">Link1</a>
<a href="google.">Link2</a>
<a href="google.">Link3</a>
<a href="google.">Link4</a>
<a href="google.">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!
Share Improve this question asked May 17, 2015 at 11:51 sMilbzsMilbz 9511 gold badge7 silver badges25 bronze badges 3- If you vote down, could you at least explain why? – sMilbz Commented May 17, 2015 at 11:54
- Don't pass your controller name into the module. Just write angular.module('MyApp', []); and of course, as mentioned by @Oka make sure that you have angularjs linked! plnkr.co/edit/IOadeEPpcXlId93VEq2I?p=preview – jme11 Commented May 17, 2015 at 12:43
- I'm voting to close this question as off-topic because the angular script was not included. Similar to "typographical error", but more than just a typo. – krillgar Commented May 19, 2016 at 17:25
2 Answers
Reset to default 4angular is not defined because you never included it.
Add the following before your controller script:
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Or go to https://angularjs/ and find a method of including Angular that works best for you.
I think this just boils down to a misunderstanding of how AngularJS modules work.
Modules are top-level ponents 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 ponent 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742355240a4428296.html
评论列表（0条）