Angular Js ->UI -路由->解决问题

Angular Js -> UI - routing -> resolve issue

本文关键字：解决问题 -路 UI Angular Js      更新时间：2023-09-26

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

看完这篇文章，选择了路由解析技术。

这是我得到的错误

错误:[$injector:unpr]未知提供商:actorGridDataProvider <- actorGridData <- mainControllerhttp://errors.angularjs.org/1.4.7/$喷射器/unpr ? p0 = actorGridDataProvider % 20% 3 c - 3 c % 20 actorgriddata % 20% % 20 maincontroller在REGEX_STRING_REGEXP (angular.js:68)在angular.js: 4289在对象。getService [as get] (angular.js:4437)在angular.js: 4294at getService (angular.js:4437)在对象。调用(angular.js: 4469)在识别。get.extend美元。实例(angular.js: 9136)(angular.js:8248)在复合链接fn (angular.js:7680)at publicLinkFn (angular.js:7555)

我猜'actorGridData'在mainController被调用之前没有定义。我试图在应用程序加载的主页上填充网格。因此采用了解决技术方法。

路由器代码:

    '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时，也会发生同样的事情。

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

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

相关文章：