如何使用服務而不是控制器

Question

我不知道如何在AngularJS1應用程序中使用服務而不是控制器。

這是我的控制器，我想使用一個服務，因爲我想在我的html中有2個控制器，1個表單和1個表格列表。

我該怎麼做？

Answer 1

如果要使用該服務，請檢查此鏈接： https://docs.angularjs.org/guide/services

你的情況：

，可以是：

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

，並在你的控制器：

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

但有很多方法可以共享d控制器之間的ata。簡單的谷歌搜索會給你答案。

Answer 2

在AngularJS，服務應該回到它的API作爲一個JavaScript對象，所以一個基本的服務將是這樣的：

//filename: user.service.js 

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

function userService() { 
    return { 
     sayHi 
    }; 

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

注：是用.factory而不是.service一個好習慣。這些組件幾乎相同，因此使用factory更爲常見。

當您返回一個JavaScript對象，你暴露的API到控制器，因此調用一個服務內部的控制器是這樣的：

//filename: user.controller.js 

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

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

這是你將如何創建一個服務，你將如何使用其控制器內部的功能。

現在，如果你需要有一個用戶列表，那麼你需要聲明裏面的服務用戶陣列，而不是宣佈它的控制器內的，並返回服務API，因此，例如：

//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; 
    } 
} 

現在您可以訪問來自每個控制器的方法userService.addUser(user)和來自每個控制器的userService.getUsers()，您只需將服務作爲控制器參數包括在內，如上所述。

使用這項服務的典型控制器會看起來像：

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 = {}; 
    } 
    }); 

控制器調用userService.addUser時，它需要將用戶添加到列表中，當需要從服務檢索用戶調用userService.getUsers。現在，users陣列將在所有使用此服務的控制器之間共享。

因此，使用該控制器的視圖將看起來像：

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

當然，這只是一個簡單的例子，你可以添加自己的職能和行爲的控制器和服務，但你可以也可以使用這些示例作爲代碼的基礎。

就是這樣！如果您需要任何其他幫助，我將很樂意:)