Menu
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]"
410
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");
});
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
