Fatal编程技术网
  • javascript/
  • Javascript 角度Js->；用户界面-路由->；解决问题

Javascript 角度Js->；用户界面-路由->；解决问题

javascript angularjs

Javascript 角度Js->；用户界面-路由->；解决问题,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我正在用AJS（1.4.7）和angular ui router（0.2.15）开发一个简单的AJS应用程序 浏览了文章并选择了路径解析技术 这是我得到的错误 错误：[$injector:unpr]未知提供程序：actorGridDataProvider当您使用ui路由器时，不应在任何地方使用ng控制器。当控制器的相应状态被激活时，会自动为ui视图实例化控制器 将更改为是的，我必须卸下ng控制器。我还必须删除grid.html中的ng控制器。谢谢你的回复。 'use strict';

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

浏览了文章并选择了路径解析技术

这是我得到的错误

错误：[$injector:unpr]未知提供程序：actorGridDataProvider当您使用ui路由器时，不应在任何地方使用ng控制器。当控制器的相应状态被激活时，会自动为
ui视图
实例化控制器

将
更改为

是的，我必须卸下ng控制器。我还必须删除grid.html中的ng控制器。谢谢你的回复。 
    '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
        } ]
    };

});

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