Setting up a project with ui router

sam

unread,

Feb 16, 2015, 5:37:28 AM2/16/15

to ang...@googlegroups.com

Hi all,

First time posting on this group (in any in fact) so I hope i'm not breaking any rules !

I'm trying to settup a project (small test project) with angular-ui-router. When I try and load the app I get:

[$injector:modulerr] Failed to instantiate module ui.router due to:
[$injector:nomod] Module 'ui.router' is not available! You either misspelled [...]

I'm using a layout very similar to the angular seed, here's my layout:

testapp/

app/

mainPage/

mainPage.html
mainPage.js

app.js
index.html

I put the ui-router in the package.json and it gets downloaded fine.
Here are my files:

app.js:

angular.module('testProject', [
    'testProject.mainPage',
    'ui.router'
])
.config(['$stateProvider', '$urlRouteProvider', function($stateProvider, $urlRouteProvider){
    $urlRouterProvider.otherwise('/mainpage');

}]);

mainPage.js:

angular.module('testProject.mainPage', ['ui.router'])

.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider){

    $stateProvider.state('mainPage',{
        url: '/mainpage',
        templateUrl: 'mainPage/mainPage.html',
        controller: 'mainPageController'
    });

}])

.controller('mainPageController', [function(){

}]);

index.html:

<body>

        <div ui-view></div>

        <scricp src="../node_modules/angular-ui-router/release/angular-ui-router.js"></script>

        <script src="app.js"></script>
        <script src="mainPage/mainPage.js"></script>

    </body>

Tell me if you need more context or anything else.

Thanks
Sam

Sander Elias

unread,

Feb 16, 2015, 5:51:21 AM2/16/15

to ang...@googlegroups.com

Hi Sam,

Welcome to our little group! The error looks like you didn’t include the ui-router’s JS file into the index.html. Did you check the developers console for errors?
replace your script tag with this one to try:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>

Drop us a note on your progress,
Regards
Sander

sam

unread,

Feb 16, 2015, 6:01:10 AM2/16/15

to ang...@googlegroups.com

Thanks for the fast reply.

So I changed my script tag to yours, I get a different error now:

Error: [$injector:modulerr] Failed to instantiate module testProject due to:
[$injector:unpr] Unknown provider: $urlRouteProvider

Sander Elias

unread,

Feb 16, 2015, 6:12:10 AM2/16/15

to ang...@googlegroups.com

Hi Sam,

I think you made an typo in your code, its $urlRouterProvider not $urlRouteProvider

regards

Sander

sam

unread,

Feb 16, 2015, 6:24:34 AM2/16/15

to ang...@googlegroups.com

Great, I knew it was something stupid like that !
Do you have any tips on avoiding these, or at least finding them ?

Thanks for your help :)

Sander Elias

unread,

Feb 16, 2015, 6:39:20 AM2/16/15

to ang...@googlegroups.com

Hi Sam,

Just track back what you are doing, and check the exact spelling in errors. A good editor might help with some of those issues.

Regards

Sander

sam

unread,

Feb 16, 2015, 7:31:43 AM2/16/15

to ang...@googlegroups.com

Ok

By the way the real problem was actually a misspell of script in the tags.
I spelled it "scricp" ! Bad day for me.

Thanks for your patience
Sam

Sander Elias

unread,

Feb 16, 2015, 7:40:25 AM2/16/15

to ang...@googlegroups.com

Sam,

Well, that exact same typing error did cost me (and probably will again) quite some time. (not all in 1 go tough... )