5

Im new to AngularJs and I'm trying to get this ui-route working but no luck. This is a snippet of my .js file containing the route configure.

//object for routing var route = angular.module('route', ["ui.router"]) // configure the routing route.config(function($stateProvider, $urlRouterProvider) { // send to profile page $urlRouterProvider.otherwise("/personal_info"); $stateProvider // route for personal info .state('personal_info', { url: "/personal_info", templateUrl : 'personal_info.html' , controller : 'persController' }) });

And this is my html file where I try to inject the ui-veiw and implement the nav bar with the routing.

<!DOCTYPE html> <html ng-app='app'> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, pre-check=0, post-check=0, max-age=0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script> <script src="client_UI.js"></script> <script src="angular.js"></script> <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel = "stylesheet" type="text/css" href="css/bootstrap.css"> <link rel = "stylesheet" type="text/css" href="css/mycss.css"> </head> <body> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="js/bootstrap.js"></script><!-- navigation bar --> <div class="navbar-header"> <a class="brand" ui-sref="#">Home</a> <ul class="nav nav-pills"> <li><a class="active" ui-sref="personal_info">Personal Info</a></li> <li><a ui-sref="cog_health">Cognitive Health</a></li> <li><a ui-sref="gen_health">General Health</a></li> </ul> </div> <div class="container"> <div ui-view></div> </div> </div> </body> </html>

I'm getting this error that says "Error: Could not resolve 'peronal_info' from state '' transitionTo@http://angular-ui.github.io/ui-router/release/angular-ui-router.js:1971 ...". Can someone please give me a hint on how to fix this problem?

Thanks

UPDATE: I've fixed a syntax problem and now I'm getting an error that looks like this , 

"GET http://localhost:3000/personal_info.html [HTTP/1.1 401 Unauthorized 1ms]"
Improve this question
10
  • Shouldn't the angular-ui-router.js be loaded before the app.js (angular.js or client_ui.js)? Commented Jun 27, 2014 at 16:57
  • I modified my code and loaded the angular-ui-router.js before angular.js and client_ui.js but I'm still getting the same error Commented Jun 27, 2014 at 17:02
  • If personal_info is your only state, have you tried changing it to index? Not entirely sure, but ui-router may need an index state by default. (correct me if I'm wrong) Commented Jun 27, 2014 at 17:05
  • What do you mean by index state? Is it something like ... "<a class="brand" ui-sref="#">Home</a>"? And I'm only showing one state in the code. I have others but I need to make this work before I head to the others. Thanks for the help, much appreciated Commented Jun 27, 2014 at 17:17
  • Since it is an 401 it led me to look for an incorrectly defined base tag, but there was none. But what url do you use to get your "index.html" (or what you have called it)... since your not in html5 mode, there may be some residual issues when your working in virtual directories... Commented Jun 27, 2014 at 17:19

2 Answers 2

Reset to default
4

Here's an example of my app.js with ui-router.

'use strict'; angular.module('srcApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router' ]) .config(function ($stateProvider, $urlRouterProvider, $locationProvider) { $stateProvider .state('lang', { url: '/:lang', templateUrl: '../views/interface.html', controller:'MainCtrl' }); $locationProvider.html5Mode(true).hashPrefix('!'); $urlRouterProvider.when('/', '/en'); $urlRouterProvider.otherwise('/en'); });

I'd suggest trying something with yours like:

//object for routing var app = angular.module('app', ["ui.router"]); // configure the routing app.config(function($stateProvider, $urlRouterProvider) { $stateProvider // route for personal info .state('index', { url: "/personal_info", templateUrl : 'personal_info.html' , controller : 'persController' }); // send to profile page $urlRouterProvider.otherwise("/personal_info"); });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

You're a life saver! Thanks a lot. Can you please explain why we're using 'index' as the state and not personal_info?
I'm just not sure (hence laziness on this holiday) if ui-router requires an index state or not.
0

I had the same issue. But I resolve mine by using the latest release of angular-ui-router.js from unpkg.com. I use version 3.2.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.