CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Théophile Nzungize
Théophile Nzungize

Reputation: 13

(AngularJS) ng:areq Bad Argument: Argument 'fn' is not a function, got Object?

I'm learning angular. For the last hours my page isn't showing anythin even though the request seems to be successful.

The component in question:

// Register `eventsQc` component, along with its associated controller and template
angular.
module("eventsQc").
component("listeEvenements", {
    templateUrl: "appli/liste-events/template-liste-evenements.html",
    controller: function evenementsQuebecController($http) {
        var self = this;
        self.orderProp = 'DT01';
        $http.get("/appli/data/evenements-source.json").then(function(reponse) {
            for (i = 0; i < reponse.data.evenements.evenement.length; i++) {
                self.evenements = reponse.data.evenements.evenement[i];
            }
        });
    }
});

The html that is used to show the output

<ul>
    <li ng-repeat="evenement in $ctrl.evenements">
        <div>ID- {{evenement.MUNID}}</div>
    </li>
</ul>

And finally the code for the index.html page. You will see the component has been created.

<!doctype html>
<html lang="en" ng-app="eventsQc">

<head>
    <meta charset="utf-8">
    <title>Quoi faire à Québec</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>

    <liste-evenements></liste-evenements>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="appli/app.js"></script>
<script src="appli/liste-events/liste-events-component.js"></script>
</body>

</html>

I checked everything, but nothing is showing on the page even if ng-inspector shows the results from the $http call. I just keep getting the same message:

Upvotes: 0

Views: 520

Answers (1)

Thailand
Thailand

Reputation: 93

example component

 var app = angular.module('eventsQc');

    app.component(
                'listeEvenements',
                {
                    templateUrl : 'appli/liste-events/template-liste-evenements.html',
                    controller : function ($http,$scope) {
                        $scope.Register = function () {
                            var req = {
                                method: 'GET',
                                url: '/appli/data/evenements-source.json',
                                data: { }
                            };

                            $http(req).then(
                                function(response){
                                    console.log(req);
                                    console.log(response);
                                $scope.evenements= response.data.data;


                                }, function (error) {
                                    console.log(error.data);
                                });
                        }

                    }
    });

html (get rid of $)

<ul>
    <li ng-repeat="evenement in evenements">
        <div>ID- {{evenement.MUNID}}</div>
    </li>
</ul>

<button ng-click="Register()">REGISTER</button>

do forget to define your module in your(app.js)

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

Upvotes: 1

Related Questions