Angular js injection error when app is loaded on browser

Question

I get this error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=myTmoApp.pdl&p1=Err…rkspace%2Fnetbeans-workspace%2FJsonParsing%2Fweb%2Fangular.min.js%3A18%3A3)

I have properly injected all services and scopes but still I get this error when I run the app.

Here is the code:

var app = angular.module("myTmoApppdl", []);


app.controller("myCtrl", function ($scope, jsonParsingService) {

    var digitalData = digitalData || {};

    digitalData =
            {
                "page": {
                    "pageInfo": {
                        "pageID": "12345",
                        "pageName": "smartphones:samsung-galaxy-s-5",
                        "pageURL": "www.t-mobile.com/products/smartphonesSamsungGalaxyS5",
                        "previousPageURL": "www.t-mobile.com/products/smartphones",
                        "prevPageName": "phones",
                        "version": "1.15",
                        "language": "en-US",
                        "geoRegion": "US",
                        "domain": "t-mobile.com",
                        "responsiveState": "desktop",
                        "timeStamp": "2015-03-23T20:52:23.563Z",
                        "currencyCode": "USD"
                    },
                    "category": {
                        "primaryCategory": "shop",
                        "subCategory": ["smartphones"],
                        "pageType": "product details",
                        "variant": "",
                        "channel": "",
                        "subChannel": "",
                        "flowName": "",
                        "storeID": "",
                        "referringApp": "tapestry"
                    },
                    "search": {
                        "searchTerm": "",
                        "searchResultCount": 0
                    }
                }
            };

    digitalData = JSON.stringify(digitalData);
    console.log("json to be parsed is: " + digitalData);

    $scope.myTxt = "You have not parsed json yet";
    $scope.myFunc = function () {
        jsonParsingService.parseMyJson(digitalData);
        $scope.myTxt = "Json parsing complete!";
        console.log("Json parsing complete");
    };
});

Service:

app.service('jsonParsingService', function () {

    this.parseMyJson = function (json) {
        var obj = JSON.parse(json);
        console.log(obj);
    };
});

It is just a sample app I am trying to run but unable to figure out what went wrong

Script files:

<script src="https://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>

<script src="parseJson.js" type="text/javascript"></script>

Answer 1

You have to pass in the service in the following format to the Controller. See the array notation.

.controller('myCtrl', ['$scope', 'jsonParsingService',function($scope,jsonParsingService){ 

    //controller code here
}]);

See the docs about Dependency Injection here

Answer 2

It seems that your angular.js wasn't available. Please see a running example in this bin