コントローラの代わりにサービスを使用する方法

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。シンプルなgoogle検索で回答が得られます。

Answer 2

AngularJSでは、サービスは、JavaScriptオブジェクトとしてAPIだ返す必要がありますので、基本的なサービスは、次のようになります。

は

//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()メソッドにアクセスできます。上で説明したように、コントローラのパラメータとしてサービスを含めるだけで済みます。それはリストにユーザーを追加する必要があり、それがサービスからユーザーを取得する必要があるときuserService.getUsersを呼び出したときに、コントローラがuserService.addUserを呼び出し

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

：このサービスを利用して

典型的なコントローラは次のようになります。 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> 

例をコードのベースとして使用してください。

これだけです！他に必要なものがあれば、私は喜んで助けてくれるでしょう:)