This is the code in my index.html
<html ng-app="">
<head>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/phoneControllers.js"></script>
<title ng-bind-template="Google Phone Gallery:{{query}}">Google Phone Gallery</title>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Search:
<input ng-model="query">
Sory by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<h1>{{Hello}}</h1>
<p>Total number of phones:{{filtered.length}}</p>
<ul class="phones">
<li ng-repeat="phone in filtered=(phones | filter:query | orderBy:orderProp)" class="thumbnail">
<span>{{$index}}</span>
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}" /></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
<div id="currentFilter">Current filter: {{query}}</div>
<div id="currentOrderPrep">Current Order: {{orderProp}}</div>
<!--<div>{{phones|json}}</div>-->
</body>
</html>
When I open it by Chrome with Web Inspector, it often throws this:
return ensure(modules, name, function() {
if (!requires) {
throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +
"the module name or forgot to load it. If registering a module ensure that you " +
"specify the dependencies as the second argument.", name);
}
And this is the phoneControllers.js:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = "age";
};
But when closing Chrome Web Inspector, all ran smoothly. Could you tell me what happens? Thanks in advance
I read the angular.js code, it seems this is the Angular bug, whenever, this error will be thrown.
var $injectorMinErr = minErr('$injector');
var ngMinErr = minErr('ng');
function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}
var angular = ensure(window, 'angular', Object);
// We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap
angular.$$minErr = angular.$$minErr || minErr;
return ensure(angular, 'module', function() {
/** @type {Object.<string, angular.Module>} */
var modules = {};
return function module(name, requires, configFn) {
var assertNotHasOwnProperty = function(name, context) {
if (name === 'hasOwnProperty') {
throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);
}
};
assertNotHasOwnProperty(name, 'module');
if (requires && modules.hasOwnProperty(name)) {
modules[name] = null;
}
return ensure(modules, name, function() {
if (!requires) {
throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +
"the module name or forgot to load it. If registering a module ensure that you " +
"specify the dependencies as the second argument.", name);
}
The variable requires never be defined. I'm a fresher, any mistake, please tell me.
I have to link you to AngularJS documentation
Angularjs $injector::nomod
which basically says that your module should be defined as:
angular.module('myApp',[]);
well it happened to me too today - looking for answers no one said the reason i had. just misspelled the word function (can be anything else) and that caused the whole module not to load.
Shlomi
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With