Lỗi "không thể giải quyết ... từ trạng thái ..." khi sử dụng các tuyến lồng nhau angularjs

Question

Tôi mới sử dụng các angularj và tôi muốn sử dụng các tuyến đường lồng nhau cho ứng dụng của mình. Một số đoạn mã ...

profile.html

<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> 
     </div> 
    </div> 

client_UI.js

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

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

    // send to profile page 
    $urlRouterProvider.otherwise("/profile"); 

    $stateProvider 

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

edit.html

<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> 

    <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"> 
      </div> 

profile.js

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

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

$stateProvider 

//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(); 

và điều này là quan điểm (index.html) ...

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

    <!-- Footer --> 
    <footer></footer> 

Tôi nhận được một lỗi từ giao diện điều khiển mà nói, không thể giải quyết " 'edit_profile' từ nhà nước 'hồ sơ '' và edit.html được coi là trạng thái con của profile.html. Tôi đang sử dụng ui-định tuyến trong angularjs. Tôi muốn có thể nhấp vào một nút trong tiểu sử.html sẽ thay đổi trạng thái thành edit_profile và sẽ được hiển thị trong giao diện ui trong index.html. Bất kỳ đề xuất về cách sửa lỗi này hoặc có cách nào khác dễ dàng để thực hiện việc này không?

Answer 1

Trong trường hợp này, góc là thông báo cho chúng tôi: Tôi chỉ đơn giản là không thể tìm thấy trạng thái edit_profile. Tôi tạo ra làm việc example here

Lý do là trên thực tế, chúng ta thực sự phải tải 2 js file:

• profile.js
• client_UI.js

cả trong số họ phải được tải nhưng cả hai người trong số họ không thể khai báo cùng một mô-đun:

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

một trong số họ phải khác hoặc chỉ không tuyên bố nhưng tiêu thụ các module:

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

hoặc cả hai có thể là trong cùng một mô-đun:

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

Kiểm tra xem tất cả làm việc here