How to Work with AngularJS Service Components

Updated on September 20, 2015     Kisan Patel

This tutorial explains you how to work with AngularJS services.

AngularJS provides services that we can use. You can read list of AngularJS services on API https://docs.angularjs.org/api/ng/service.

Here we will create AngularJS app with $log service. This service pass message to browser’s console.

Lets Create a file, called script.js. Then write below script.

<script type="text/javascript">
 var myModule = angular.module("app", []);

 myModule.controller('logController', function ($scope, $log) {

     $scope.$log = $log;
     $scope.message = 'AngularJS';

 });
</script>

You can see the controller pass $log service. Next, we create a file called index.html. write following code.

<div ng-app="app" ng-controller="logController">
   <p>
      <label for="message">Message:</label>
      <input type="text" id="message" ng-model="message" />
   </p>
   <button ng-click="$log.log(message)">Log</button>
   <button ng-click="$log.warn(message)">Warn</button>
   <button ng-click="$log.info(message)">Info</button>
   <button ng-click="$log.debug(message)">Debug</button>
   <button ng-click="$log.error(message)">Error</button>
</div>

We create ng-model with name ‘message’. 5 buttons to simulate $log service that provides log(), warn(), info(), debug(), and error(). Save all code. Open browser and run file logservice.html. Before clicked a button, open browser developer tool to show Console.

Output

Read More: AngularJS service and factory