So verwenden Sie einen Dienst anstelle eines Controllers

Question

Ich weiß nicht, wie man einen Dienst anstelle eines Controllers in einer AngularJS1-App verwendet.

dies ist mein Controller, und ich möchte einen Dienst verwenden, weil ich 2 Controller in meinem HTML haben möchte, 1 für Formular und 1 für die Tabellenliste.

Wie soll ich das tun?

Answer 1

Wenn Sie den Dienst nutzen möchten, wenden Sie sich bitte diesem Link: https://docs.angularjs.org/guide/services

In Ihrem Fall:

das kann sein:

myApp.service('userService',['$scope',function($scope){ 
    $scope.user = []; 
    $scope.addUser = function() {...}; 
    .... 
}]) 

und in Ihrem Controller:

myApp.controller('usersCtrl', function ($scope, userService) { 
    $scope.user=userService.user; 
    ... 
} 

Aber es gibt viele Möglichkeiten, d zu teilen Ata zwischen Controller. Einfache Google-Suche gibt Ihnen Antworten.

Answer 2

In AngularJS sollte ein Dienst zurückkehren, es ist API als Javascript-Objekt, so dass ein Basisdienst wird wie folgt aussehen:

//filename: user.service.js 

angular.module('app') 
    .factory('userService', userService); 

function userService() { 
    return { 
     sayHi 
    }; 

    function sayHi() { 
     alert('Hi'); 
    } 
} 

Hinweis: es ist eine gute Konvention .factory statt .service zu verwenden. Diese Komponenten sind fast identisch, so dass es häufiger verwendet wird factory.

Wenn Sie zurück ein Javascript-Objekt Sie eine API an die Controller aussetzen, so einen Service Aufruf innerhalb einer Controller wie ist:

//filename: user.controller.js 

angular.module('app') 
    .controller('userCtrl', userCtrl); 

function userCtrl($scope, userService) { 
    $scope.sayHi = userService.sayHi; 
} 

Dies ist, wie Sie einen Dienst erstellen, und wie werden Sie seine Verwendung Funktionen in einem Controller.

Nun, wenn Sie eine Liste der Benutzer haben müssen, dann müssen Sie den Benutzer-Array innerhalb des Service zu erklären, anstatt es in der Steuerung zu erklären, und den Service-API zurückgeben, so zum Beispiel:

//filename: user.service.js 

angular.module('app') 
    .factory('userService', userService); 

function userService() { 
    var users = []; 

    return { 
     addUser, 
     getUsers, 
    }; 

    function addUser(user) { 
     users.push({ 
     username: user.username, 
     level: user.level, 
     registrationStatus: user.registrationStatus, 
     registrationDate: user.registrationDate 
     }); 
    } 

    function getUsers() { 
     return users; 
    } 
} 

Jetzt können Sie von jedem Controller aus auf die Methode userService.addUser(user) und von jedem Controller auf userService.getUsers() zugreifen. Sie müssen den Service lediglich als Parameter für den Controller hinzufügen, wie oben erklärt.

Ein typischer Controller mit diesem Service wird wie folgt aussehen:

angular.module('app') 
    .controller('UserCtrl', UserCtrl); 

function UserCtrl($scope, userService) { 

    $scope.addUser = addUser; 
    $scope.users = userService.getUsers(); 

    function addUser(user) { 
     userService.addUser(user); 
     $scope.user = {}; 
    } 
    }); 

Die Steuerung der userService.addUser anruft, wenn es um einen Benutzer zu der Liste hinzufügen muss, und fordert userService.getUsers, wenn es die Benutzer aus dem Dienst abrufen muss. Jetzt wird das Array users für alle Controller freigegeben, die diesen Service verwenden.

So eine Ansicht, diese Controller wird wie folgt aussehen:

<div ng-controller="UserCtrl"> 

    <form ng-submit="addUser(user)"> 
    <input type="text" ng-model="user.username"> 
    <input type="text" ng-model="user.level"> 
    </form> 

    <ul> 
    <li ng-repeat="user in users">{{user.username}}</li> 
    </ul> 

</div> 

Natürlich ist dies nur ein einfaches Beispiel ist, und Sie können Ihre eigenen Funktionen und Verhaltensweisen an den Controller und den Dienst hinzufügen, aber Sie können Verwenden Sie auch die Beispiele als Basis für Ihren Code.

Das war's! Wenn Sie noch etwas brauchen, werde ich Ihnen gerne weiterhelfen :)