未知提供者:DashboardServiceProvider< - DashboardService< - DashboardController

时间:2017-10-18 16:11:10

标签: angularjs http controller

即使我根据我的问题阅读了很多解决方案,仍然有这个错误。 这是我的控制器:

@Controller
@RequestMapping( "/dashboard" )
public class DashboardController {

    @RequestMapping( value = "", method = RequestMethod.GET )
    public HttpEntity<String> dashboard() {
        SimpleDateFormat sdf = new SimpleDateFormat( "dd-MM-yyyy" );    
        return new HttpEntity<String>( "Today is " + sdf.format( new Date() ) );
    }

}

这是我的index.jsp

<body ng-app="dashboard">

    <div ng-controller="DashboardController">
        <p>Nome: <input type="text" ng-model="nome"></p>
        <p>Cognome: <input type="text" ng-model="cognome"></p>
        <input type="button" value="LOGIN" ng-click="login()"/>
    </div>

    <jsp:include page="includes.jsp"></jsp:include>

    <div ng-show="value==1">
        {{data}}
    </div>
    <div ng-show="value==0">
        {{ResponseDetails}}
    </div>


</body>

这是我的模块

var Dashboard = angular.module( 'dashboard', ['DashboardService'] )
    .config(['$routeProvider', '$locationProvider',
        function ($routeProvider, $locationProvider) {
            $locationProvider.html5Mode(true);

            $routeProvider.when('/dashboard', {
                templateUrl: '/WEB-INF/pages/dashboard.jsp',
                controller: 'DashboardController'
            });
        }]);

我的服务

Dashboard.factory('DashboardService', function ($http) {

    return {
        dashboard: function(successCallback, errorCallback) {
            $http.get("/dashboard")
                .success(
                    function (response) {
                        $scope.data = response;
                    }
                ).error(
                function (response) {
                    $scope.data = "ERROR!";
                }
            )
        }
    }
});

最后是我的控制器

angular.module("dashboard", [])
    .controller( 'DashboardController', function ($scope, DashboardService) {
        $scope.nome = "Daniele";
        $scope.cognome = "Comandini";

        var data = {
            nome: $scope.nome,
            cognome: $scope.cognome
        };

        $scope.value = 0;

        var login = function() {
            alert("LOGIN ON DASHBOARD");

            DashboardService.dashboard();
        };

        $scope.login = login;

    });

我的JSP页面必须只将请求发送到DashBoardcontroller,它返回带有当前日期的页面dashboard.jsp。

2 个答案:

答案 0 :(得分:0)

您不能在模块中注入依赖项。像servicefactory这样的依赖关系必须注入控制器。顺便说一下,不要忘记注入ngRoute

模块变为:

var Dashboard = angular.module( 'dashboard', ['ngRoute'] )
    .config(['$routeProvider', '$locationProvider',
        function ($routeProvider, $locationProvider) {
            $locationProvider.html5Mode(true);

            $routeProvider.when('/dashboard', {
                templateUrl: '/WEB-INF/pages/dashboard.jsp',
                controller: 'DashboardController'
            });
        }]);

您的控制器代码很好,只有一件事:如果您想使用代码编译器,如 Grunt Gulp Webpack ,请不要不要忘记将依赖项添加为字符串:

angular.module('dashboard')
    .controller( 'DashboardController', ['$scope', 'DashboardService'], function ($scope, DashboardService) {

答案 1 :(得分:0)

我使用服务注入复制了控制器

.controller( 'DashboardController', ['$scope', 'DashboardService'], function ($scope, DashboardService) {

但最后我不得不写这个

Dashboard.controller( 'DashboardController', ['$scope', 'DashboardService' , function ($scope, DashboardService) {
        $scope.nome = "Daniele";
        $scope.cognome = "Comandini";

        var data = {
            nome: $scope.nome,
            cognome: $scope.cognome
        };

        $scope.value = 0;

        var login = function() {
            alert("LOGIN ON DASHBOARD");

            DashboardService.dashboard();
        };

        $scope.login = login;

    }]);

我的意思是我必须将函数包含在[]中,而不是外部。