Angular提供程序无法工作

Angular provider not working

本文关键字：工作 程序 Angular      更新时间：2023-09-26

我正在学习Angular中的服务。我试过服务和工厂，可以让他们工作，但我不能让供应商工作。我也检查了几个SO答案的解决方案，仍然不能让它工作

This is my provider:

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];
    this.$get = function() {
        return {
            getList: function() {
                return list
            },
            add: function(employee) {
                list.push(employee);
            }
        };
    }
})

我的控制器:

app.controller('MainCtrl', function($scope, EmployeeService) {
    $scope.employee = {
        name: '',
        skill: ''
    };
    $scope.employees = EmployeeService.getList();
    $scope.add = function(employee) {
        EmployeeService.add(employee);
        $scope.employee = {
            name: '',
            skill: ''
        }
    }
});

和app.js 

var app = angular.module('myApp', []);
app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
    var user = {
        name: 'Rob',
        skill: 'Hacker'
    };
    EmployeeServiceProvider.add(user);
}]);

我的html是:

<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS app</title>
    <script src="js'angular'angular.js"></script>
    <script src="app'app.js"></script>
    <script src="app'controllers'MainCtrl.js"></script>
    <script src="app'services'EmployeeService.js"></script>
</head>
<body>
    <div ng-controller='MainCtrl'>
        <input type="text" ng-model="employee.name" placeholder="Enter employee name"/>
        <input type="text" ng-model="employee.skill" placeholder="Enter employee skill"/>
        <button ng-click="add(employee)">Add</button>
        <hr>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Skill</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in employees">
                    <td>{{person.name}}</td>
                    <td>{{person.skill}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

我希望在配置中添加值，然后在HTML中提供它。但是我做不到。控制台也没有显示任何内容。请让我知道如何正确配置提供程序并在配置中使用它。

问题在您的provider代码中。提供程序需要返回一个包含$get属性的对象。简单地将$get加入this是行不通的。在$get中，您需要返回控制器(即add()和getList())使用的函数

您需要在两个地方保留add函数:

首先，在提供者的return{ }中(作为$get的兄弟)，因为您在config函数中使用它。

app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
    var user = {
        name: 'Rob',
        skill: 'Hacker'
    };
    EmployeeServiceProvider.add(user);   //<--  Here
}]);

其次，您需要将add函数保留在$get的返回中，因为您在控制器中使用它。

$scope.add = function(employee) {
    EmployeeService.add(employee);   <-- Here
    $scope.employee = {
        name: '',
        skill: ''
    }
}

提供程序的完整代码:

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];
  return{
    add: function(employee) {    //This is for Config's visibility
        list.push(employee);
    },    
    $get:function(){
        return{
            add: function(employee) {    // This is for controller's visibility
                list.push(employee);
            },    
            getList: function() {
                return list
            }          
        }
    }
  }
})

您还可以将方法($get和add)绑定到this，而不是返回一个单独的对象

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];
    this.add= function(employee) {
        list.push(employee);
    }
    this.$get = function() {
        return {
            getList: function() {
                return list
            },
            add: function(employee) {
                list.push(employee);
            }
        };
    }  
})

这是工作活塞

相关文章：