deryl deryl - 1 year ago 136
AngularJS Question

Getting "could not resolve ... from state ..." error when using nested routes angularjs

I'm new to angularjs and I want to use nested ui-routes for my application. Some code snippets ...


<div class="row">
<div class="dl-horizontal" id="information">

<div class="col-md-8 col-md-offset-2">

<!-- edit button -->
<div style="margin-bottom: 15px">
<div class="button" style="margin-top:5px" style="float:left">
<button type="button" class="btn btn-primary" ui-sref="edit_profile" ng-click="populate()"><span class="glyphicon glyphicon-pencil"></span> Edit Profile</button>


//object for routing
var route = angular.module('route', ["ui.router"])

// configure the routing
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

// send to profile page


// route for personal info
.state('profile', {
url: "/profile",
templateUrl : "profile_area/profile.html" ,
controller : 'profileController'


<script src="Scripts/angular-ui-bootstrap.js"></script>

<!-- title -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h2 class="modal-title"> Editing Profile</h2>

<div class="modal-body">
<form role="form" id="myForm">

<!-- Name -->
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="name">Name &nbsp;</label>
<input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name">


//object for routing
var route = angular.module('route', ["ui.router"])

// configure the routing
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {


//route for edit page
.state('edit_profile', {
url: "/edit_profile",
templateURL : "edit/edit_profile.html" ,
controller : 'editController'

route.controller('editController' ["$scope", "$resource", function($scope, $resource) {

// resource objects
var profile = $resource($scope.apicall + "/api/userprofile/", {Userid:$scope.userid}, {'post':{method: 'POST'}});
var edit = new profile();

and this is the view (index.html) ...

<!-- route veiw -->
<div class="container" id="route" style="width:90%">
<div ui-view></div>

<!-- Footer -->

I'm getting an error from the console that says, Could not resolve "'edit_profile' from state 'profile'" and edit.html is supposed to be the child state of profile.html. I'm using ui-routing in angularjs. I want to be able to click a button in the profile.html that will change the state to edit_profile and will be displayed in the ui-view in index.html. Any suggestions on how to fix this or is there another easy way to do this?

Answer Source

In this case, angular is informing us: I simply cannot find the state edit_profile. I created working example here

The reason is in fact, that we really have to load 2 js files:

  • profile.js
  • client_UI.js

both of them must be loaded but both of them cannot declare the same module:

var route = angular.module('route', ["ui.router"])

one of them must be different or just not declare but consume the module:

// client_UI.js
var route = angular.module('client_ui', ["ui.router"])
// profile.js
var route = angular.module('route', ["ui.router", "client_ui"])

or both could be in same module:

// client_UI.js
var route = angular.module('route', ["ui.router"])
// profile.js
var route = angular.module('route')

Check that all working here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download