How to Work with AngularJS Service Components

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

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


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">
      <label for="message">Message:</label>
      <input type="text" id="message" ng-model="message" />
   <button ng-click="$log.log(message)">Log</button>
   <button ng-click="$log.warn(message)">Warn</button>
   <button ng-click="$">Info</button>
   <button ng-click="$log.debug(message)">Debug</button>
   <button ng-click="$log.error(message)">Error</button>

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.



Read More: AngularJS service and factory


Leave a Reply