AngularJs simple custom service not working

Question

I am new to angular and trying to create a new custom service and pull data on view. What may be the issue here?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    service data is {{serviceData}}
</body>
</html>


<script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope, myService) {       
        $scope.serviceData = myService.getDetails;
    });

    app.factory('myService', function () {
        return
        {
            getDetails: "I am testing service....";
        };
    });

</script>

score 4 · Accepted Answer · answered Mar 14 '16 at 22:06

4

Please, remove semicolon from getDetails property declaration

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, myService) {
  $scope.serviceData = myService.getDetails;
});

app.factory('myService', function() {
  return {
    getDetails: "I am testing service...."
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  service data is {{serviceData}}
</div>

answered Mar 14 '16 at 22:06

Krzysztof Safjanowski

7,292
3
35
47

3

also important that object starts on same line as `return` – charlietfl Mar 14 '16 at 22:08
1

OH MY God.... you are right charlietfl. I am wondering how this is happening.... how will that make more difference if { is next to return or in next line ......? – Kurkula Mar 14 '16 at 22:11
@chandana What are the rules for JavaScript's automatic semicolon insertion – http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi – Krzysztof Safjanowski Mar 14 '16 at 22:20

AngularJs simple custom service not working

1 Answers1