I'm a relative newbie in Angular and after following the tutorial I now want to build something from scratch on my own. So I'm trying to set up a basic app in which I want to use the $stateProvider (since I read that it is better than the $routeProvider). So this is my html:
<html ng-app="formApp">
<head>
<script src=".js/1.4.3/angular.js"></script>
<script src=".2.15/angular-ui-router.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my app.js looks like this:
'use strict';
var formApp = angular.module('formApp', ['ui-router']);
formApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('/main')
});
But I get a massive error in the console, saying:
Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:modulerr] Failed to instantiate module ui-router due to:
[$injector:nomod] Module 'ui-router' 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.
.4.3/$injector/nomod?p0=ui-router
minErr/<@.js/1.4.3/angular.js:68:12
etc. etc.
I understand that 'ui-router' in my app declaration is obviously wrong, but without it I get the even bigger error below.
Any idea how I can solve this? All tips are wele!
Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:unpr] Unknown provider: $stateProvider
.4.3/$injector/unpr?p0=%24stateProvider
minErr/<@.js/1.4.3/angular.js:68:12
createInjector/providerCache.$injector<@.js/1.4.3/angular.js:4262:19
getService@.js/1.4.3/angular.js:4409:39
invoke@.js/1.4.3/angular.js:4441:1
runInvokeQueue@.js/1.4.3/angular.js:4356:11
loadModules/<@.js/1.4.3/angular.js:4365:11
forEach@.js/1.4.3/angular.js:336:11
loadModules@.js/1.4.3/angular.js:4346:5
createInjector@.js/1.4.3/angular.js:4272:11
bootstrap/doBootstrap@.js/1.4.3/angular.js:1630:20
bootstrap@.js/1.4.3/angular.js:1651:1
angularInit@.js/1.4.3/angular.js:1545:5
@.js/1.4.3/angular.js:28359:5
trigger@.js/1.4.3/angular.js:2996:7
createEventHandler/eventHandler@.js/1.4.3/angular.js:3271:9
.4.3/$injector/modulerr?p0=formApp&p1=%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24stateProvider%0Ahttp%3A%2F%2Ferrors.angularjs%2F1.4.3%2F%24injector%2Funpr%3Fp0%3D%2524stateProvider%0AminErr%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A68%3A12%0AcreateInjector%2FproviderCache.%24injector%3C%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4262%3A19%0AgetService%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4409%3A39%0Ainvoke%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4441%3A1%0ArunInvokeQueue%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4356%3A11%0AloadModules%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4365%3A11%0AforEach%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A336%3A11%0AloadModules%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4346%3A5%0AcreateInjector%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4272%3A11%0Abootstrap%2FdoBootstrap%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1630%3A20%0Abootstrap%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1651%3A1%0AangularInit%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1545%3A5%0A%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A28359%3A5%0Atrigger%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A2996%3A7%0AcreateEventHandler%2FeventHandler%40https%3A%2F%2Fcdnjs.cloudflare%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A3271%3A9%0A
I'm a relative newbie in Angular and after following the tutorial I now want to build something from scratch on my own. So I'm trying to set up a basic app in which I want to use the $stateProvider (since I read that it is better than the $routeProvider). So this is my html:
<html ng-app="formApp">
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my app.js looks like this:
'use strict';
var formApp = angular.module('formApp', ['ui-router']);
formApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('/main')
});
But I get a massive error in the console, saying:
Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:modulerr] Failed to instantiate module ui-router due to:
[$injector:nomod] Module 'ui-router' 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.
http://errors.angularjs/1.4.3/$injector/nomod?p0=ui-router
minErr/<@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:68:12
etc. etc.
I understand that 'ui-router' in my app declaration is obviously wrong, but without it I get the even bigger error below.
Any idea how I can solve this? All tips are wele!
Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs/1.4.3/$injector/unpr?p0=%24stateProvider
minErr/<@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:68:12
createInjector/providerCache.$injector<@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4262:19
getService@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4409:39
invoke@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4441:1
runInvokeQueue@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4356:11
loadModules/<@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4365:11
forEach@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:336:11
loadModules@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4346:5
createInjector@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:4272:11
bootstrap/doBootstrap@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:1630:20
bootstrap@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:1651:1
angularInit@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:1545:5
@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:28359:5
trigger@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:2996:7
createEventHandler/eventHandler@https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.3/angular.js:3271:9
http://errors.angularjs/1.4.3/$injector/modulerr?p0=formApp&p1=%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24stateProvider%0Ahttp%3A%2F%2Ferrors.angularjs%2F1.4.3%2F%24injector%2Funpr%3Fp0%3D%2524stateProvider%0AminErr%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A68%3A12%0AcreateInjector%2FproviderCache.%24injector%3C%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4262%3A19%0AgetService%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4409%3A39%0Ainvoke%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4441%3A1%0ArunInvokeQueue%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4356%3A11%0AloadModules%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4365%3A11%0AforEach%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A336%3A11%0AloadModules%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4346%3A5%0AcreateInjector%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4272%3A11%0Abootstrap%2FdoBootstrap%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1630%3A20%0Abootstrap%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1651%3A1%0AangularInit%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1545%3A5%0A%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A28359%3A5%0Atrigger%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A2996%3A7%0AcreateEventHandler%2FeventHandler%40https%3A%2F%2Fcdnjs.cloudflare.%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A3271%3A9%0A
- may be you are missing to add ui-router js file to project.. – Shubham Nigam Commented Jul 29, 2015 at 7:13
2 Answers
Reset to default 12You are trying to use $stateProvider and $urlRouterProvider which are ing from "ui.router", and you didn't inject the dependency "ui.router".
var formApp = angular.module('formApp', ['ui.router']);
That's the error you got, please have a read of https://docs.angularjs/guide/di .
You've got this error because you're injecting ui-router instead of ui.router
Replace this line in your code :
var formApp = angular.module('formApp', ['ui-router']);
With this one :
var formApp = angular.module('formApp', ['ui.router']);
And this will work flawlessly
This is a mon mistake with this library as its name is ui-router but you have to inject ui.router instead ;)