angularjs - 使用嵌套路由 angularjs 时出现 "could not resolve ... from state ..."错误

Question

我是 angularjs 新手，我想在我的应用程序中使用嵌套的 ui 路由。一些代码片段...

个人资料.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'
    })

编辑.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>

配置文件.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();

这是 View (index.html) ...

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

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

我从控制台收到一条错误消息，显示无法从状态“profile”解析“'edit_profile'”，并且 edit.html 应该是 profile.html 的子状态。我在 angularjs 中使用 ui-routing。我希望能够单击 profile.html 中的一个按钮，将状态更改为 edit_profile 并将显示在 index.html 的 ui View 中。关于如何解决这个问题有什么建议或者有其他简单的方法吗？

Answer 1

在这种情况下，Angular 正在通知我们:我根本找不到状态edit_profile。我创建了工作example here

原因实际上是，我们确实要加载2个js文件:

• profile.js
• client_UI.js

它们都必须加载，但它们不能声明相同的模块:

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

其中一个必须不同，或者只是不声明但使用模块:

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

或者两者可以在同一个模块中:

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

检查所有工作 here