How to setup and use an AngularJS service

Question

I'm new to AngularJS and I am trying to use a service so I can pass data around between controllers.

I have followed the w3schools instructions (here) to setup a service, and it resulted in this:

app.service('hexafy', function() {
    this.myFunc = function(x) {
        return x.toString(16);
    }
});

app.controller('almLoginCtrl', ['$scope', '$state', function ($scope, $state, hexafy) {

    /* This function handles the user tapping the "login" button. It will process their 
     * login details and allow proceed or show incorrect login details error as necessary.
     */
    $scope.almLogin = function () {
        $state.go('home'); 
        // Functionality needs to be added to test login data, collect and store the login data and the LWSSO
    }

    $scope.hex = hexafy.myFunc(255);
}]);

And this is how I attempt to see its output:

<h3 class="login-title">{{hex}} ALM DETAILS</h3>

(this is surrounded by other irrelevant HTML)

This is the first service I've ever tried to create so I am just creating one that will allow me to test how it works. This code is put into the second view of a AngularJS/Cordova/Ionic hybrid app I'm building. However, for some reason, when I run this code, this error appears in the console:

> TypeError: Cannot read property 'myFunc' of undefined...

(stack trace omitted for brevity)

According to W3schools, and the try-it-now playground on their site, I should see "ff" displayed next to "ALM DETAILS" on the rendered HTML page. Instead, this displays:

{{HEX}} ALM DETAILS

It displays "{{HEX}}" instead of the variable's value.

Not sure if its relevant, but I build the app with a Gulp and am testing it in the chrome browser, developer mobile view.

So, what am I doing wrong when setting up the service? Why is the function output being returned as "undefined"? (or is it the function itself that is undefined?)

Answer 1

Change

app.controller('almLoginCtrl', ['$scope', '$state', function ($scope, $state, hexafy) {

To

app.controller('almLoginCtrl', ['$scope', '$state','hexafy', function ($scope, $state, hexafy) {

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',['$scope','hexafy',function($scope, hexafy) {
$scope.hex=hexafy.myFunc(255);
}]);
myApp.service('hexafy', function() {
    this.myFunc = function(x) {
        return x.toString(16);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <h3 class="login-title">{{hex}} ALM DETAILS</h3>
</div>