Question

我正在使用ajs（1.4.7）和angular-ui-router（0.2.15）开发一个简单的AJS应用程序。

通过this文章并选择了Route Resolve技术。

这是我得到的错误

错误：[$ injector：unpr]未知提供者：actorGridDataProvider＆lt; - actorGridData＆lt; - mainController http://errors.angularjs.org/1.4.7/ $注射器/ unpr？P0 = actorGridDataProvider％20％3 C-％20actorGridData％20％3 C-％20mainController 在REGEX_STRING_REGEXP（angular.js：68）在angular.js：4289 at Object.getService [as get]（angular.js：4437）在angular.js：4294 at getService（angular.js：4437） at Object.invoke（angular.js：4469）在ident。$ get.extend.instance（angular.js：9136） at nodeLinkFn（angular.js：8248）在compositeLinkFn（angular.js：7680） at publicLinkFn（angular.js：7555）

我猜测在调用mainController之前没有定义'actorGridData'。我正在尝试在加载应用程序时在主页上填充网格。因此，解决技术方法。

路由器代码：

    'use strict';

imdbapp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/homeGridPage');

    $stateProvider

    .state('homeGridPage', {
        url : '/homeGridPage',
        templateUrl : 'uiapp/imdbapp/models/commonPages/homeGridPage.html',
        controller: 'mainController',
         resolve :{
            'actorGridData' : function($stateParams, imdbHttpService){
                return imdbHttpService.loadAllActors();
            }
         }
    });
});

这是控制器代码：

/**
 * Home Page Controller for IMDB App.
 */
'use strict';
imdbapp.controller('mainController', function($scope, $http, $rootScope, $location, imdbHttpService, actorGridData) {

    $scope.init = function() {
        /**
         * un-commenting this line calls the service after controller being
         * activated (Controller Activate). This is working as expected and grid
         * loads after application is instantiated.
         */
        // $scope.loadAllActors({});
        $scope.actorGridData = actorGridData;
    };

    $scope.loadAllActors = function(inputArgs, outputArgs) {
        imdbHttpService.loadAllActors().then(function(actorListHTTPResponseData) {
            $scope.actorGridData = [];
            if (actorListHTTPResponseData != null && actorListHTTPResponseData.actorList.length > 0) {
                $scope.actorGridData = actorListHTTPResponseData.actorList;
            }
        }, function(errorMessage) {
            $scope.error = errorMessage;
        });
    };

    $scope.imdbActorGridOptions = {
        data : 'actorGridData',
        showGridFooter : true,
        resizable : true,
        sortable : false,
        enableFiltering : false,
        columnDefs : [ {
            name : 'actor_id',
            displayName : 'Actor Id',
            enableFiltering : true,
            width : 100,
            pinnedLeft : true,
            sortable : false
        }, {
            name : 'first_name',
            displayName : 'First Name',
            width : 155
        }, {
            name : 'last_name',
            displayName : 'Last Name',
            width : 160
        } ]
    };

});

的index.html

<!DOCTYPE html>
<!-- define angular app -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SCROLLS -->
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css"
    type="text/css">
<link
    href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
    rel="stylesheet">
<!-- Custom styles for this template -->
<link href="uiapp/imdbapp/styles/styles.css" rel="stylesheet">

<title>IMDB AJS app</title>
</head>

<!-- define angular controller ng-controller="mainController"-->
<body ng-app="imdbapp" ng-controller="mainController">
    <div id="wrap">
        <nav class="navbar navbar-default" role="navigation">
            <!-- Header and Navigation section -->
            <div ng-include="'uiapp/imdbapp/models/header/application-navigation.html'"></div>
        </nav>

        <!-- angular templating; this is where content will be injected -->
        <div ui-view></div>
    </div>
    <!-- Footer section -->
    <footer class="footer">
        <div ng-include="'uiapp/imdbapp/models/footer/footer.html'"></div>
    </footer>

    <!-- JavaScript libraries -->
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

    <!-- AJS libraries -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> -->
    <script src="uiapp/imdbapp/components/angular/1.4.7/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-date/0.0.8/date.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-resource.min.js"></script>
<!--    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>

    <!-- Main app file -->
    <script src="uiapp/imdbapp/scripts/app.js"></script>

    <!-- imdbapp controllers -->
    <script src ="uiapp/imdbapp/scripts/routes/imdb-route.js"></script>

        <!-- imdbapp services -->
    <script src =uiapp/imdbapp/scripts/services/HTTPServiceWrapper.js></script>
    <script src ="uiapp/imdbapp/scripts/services/ActorServices.js"></script>

    <!-- imdbapp routes -->
    <script src ="uiapp/imdbapp/scripts/controllers/UserController.js"></script>


    <!-- imdbapp directives -->


</body>
</html>

我为HTTP调用编写了一个包装器。如果此信息不充分，我可以发布代码。

如果我俯瞰，请帮助我。提前致谢。当我选择ngRoute而不是ui-route时会发生同样的事情。

Answer 1

使用ui-router时，不应在任何地方使用ng-controller。当适当的状态被激活时，您的控制器会自动实例化为ui-view。

将<body ng-app="imdbapp" ng-controller="mainController">更改为<body ng-app="imdbapp">。

Angular Js - ＆gt; UI - 路由 - ＆gt;解决问题

1 个答案: