I've read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!
The full error reads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
{{ test }}
</div>
<script src="static/bower_components/angular/angular.js"></script>
<script src="static/bower_components/angular-route/angular-route.min.js"></script>
<script src="static/components/app.js"></script>
</body>
</html>
app.js:
'use strict';
function() {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.
'use strict';
(function () {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.
Check out this answer.
What is the difference between angular-route and angular-ui-router?
If this is the case.
Solution 1. change the script from angular-route.js to angular-ui-router.js
Solution 2. change the provider to $routeProvider
Hope it helps
If all the above answers fail, Just try this one.
I think the problem is with the included script...
Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as
<script src="angular.min.js"></script>
If it doesn't work,
Solution 2:
Try adding the above script, on your head tag just after the end of the title tag.
Related
I declare this module:
angular.module('dashboard', [])
.controller('dashboardController', ['$scope',
function ($scope) {
$scope.data = "555";
}]);
And here is view:
<div ng-app="dashboard" data-role="page" id="layersProperty" data-add-back-btn="true" >
<div ng-controller="dashboardController">
{{data}}
</div>
</div>
And here is FIDDLE.
In console I get this error:
Error: [$injector:nomod] Module 'dashboard' 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.
Any idea why I get error above?
No issue with your code, since you are adding external scripts you just need to change
Javascript settings -> Load type -> Wrap in <Head>
This is due to the javascript Load Type you have set on JSFiddle. When you use onLoad, JSFiddle will wrap your javascript in a $(window).load(function (){}); block. This means the angular.module() code that registers your Angular app will not run until after the DOM has been processed. So Angular tries to find a dashboard module that has not been created yet.
Basically your code looks good and by the way its working check it Plnkr .
check your code (did you include angular?) or just post your full code.
code in Plnkr :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="dashboard" ng-controller="dashboardController">
{{ data }}
</div>
<script>
angular.module('dashboard', [])
.controller('dashboardController', ['$scope',
function($scope) {
$scope.data = "555";
}
]);
</script>
</body>
</html>
I am making a simple program in Angular.js to print a name. Alas, still it shows an error.
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{name}}
</body>
</html>
AngularScript.js
// Defining Module
var app = angular.module('myApp',[]);
// Defining Controller
app.controller('myCtrl', function ($scope) {
$scope.name = "Peter";
});
Error:
-> Uncaught ReferenceError: System is not defined
-> Uncaught ReferenceError: angular is not defined
Can someone help me out, with where is the problem?
Use the correct version of AngularJS script file.
You are writing AngularJS script of 1.4 but including 2.0.
Just replace your script tag with:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
Just started on AngularJS, and it has been a challenging ordeal so far.
My problem today is I'm trying to configure a controller through a variable on the URL. I don't want the "real" controller to have to know where a given parameter came from, so long as it's there. The main app controller is therefore responsible of getting the parameter from the URL, and setting a constant that the "real" controller will use.
For the life of me, I cannot see what I am doing wrong in the initialization. Any help would be greatly appreciated (including what are standard practices to troubleshoot these kind of issues :))
Here is the html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- the base tag is required for th Angular.js $location.search() function to work correctly -->
<base href='/' />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
angular.module("myController.constants", []);
angular.module("myApp", ["myController", "myController.constants"], function($locationProvider) {
$locationProvider.html5Mode(true);
})
.controller("myAppCtrl", ['$scope', '$location', function ($scope, $location) {
var searchObject = $location.search();
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
}]);
</script>
<script src="js/controllerExample.js"></script>
</head>
<body ng-controller="myAppCtrl">
<div ng-controller="myControllerCtrl">
<p>The constant is {{theConstant}}</p>
</div>
</body>
</html>
Here is the js for the controller:
angular.module("myController", ["myController.constants"])
.controller("myControllerCtrl", ['$scope', 'myConstant', function ($scope, myConstant) {
$scope.theConstant = myConstant;
}]);
With the code above, I keep getting this error message
Error: [$injector:unpr] Unknown provider: myConstantProvider <- myConstant <- myControllerCtrl
Thanks!
I could be mistaken but I don't think you can declare a module inside a controller declaration. Try putting
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
outside "myAppCtrl" declaration.
I've got a very simple angular app that I can not figure out what is wrong with. The code is on plunkr here: http://plnkr.co/edit/QQkP2HB6VGv50KDdBPag?p=preview and generates the error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: testService
The code is below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple problem I can not figure out</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript">
(function() {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.service('testService', function (testService) {
});
myAppModule.config(['testService',
function (testService) {
}]);
})();
</script>
</head>
<body >
<div ng-app="myApp">
<div>
myApp Here
</div>
</div>
</body>
</html>
There are multi phase in angular bootstraps process. in config phase you can just inject provider. for example you can use this code:
myAppModule.config(['testServiceProvider',
function (testServiceProvider) {
}]);
To get more information please check this link:
https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection#configuring-providers
I have the following HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Title</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
Hello World
</body>
</html>
and is giving me the following exception:
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.2.26/$injector/nomod?p0=ngLocale
If I switch to the non-minified angular.js, the error goes away
It is hard to say without looking at your javascript file.
Usually the problem is that angular's dependency system uses function arguments with the default syntax.
for example:
app.controller('mainController', function($scope) {
$scope.data= 'data';
});
becomes:
app.controller("mainController",function(e){e.data="data"});
In order to avoid this situations you have to use the following syntax
app.controller('mainController', ['$scope', function($scope) {
$scope.data= 'data!';
}]);
So the minification script will not change the dependencies name.
You can read more at https://docs.angularjs.org/tutorial/step_05 scroll down to A note on minification