CODEWITHSUNDEEP
ruby-on-railsangularjs
user3749994
user3749994

Reputation: 405

Argument 'Controller' is not defined

I am making a little rails/angular project where I am trying to return a list of data from Instagram. Rails is just acting to serve files, and then will be deployed to heroku. The rest of the app is angular.

I keep getting the error

Argument 'MainController' is not a function, got undefined

So I know it has something to do with my controller. I have done a couple angular projects before and have them working, and I repeated my steps with this, but this error is driving me crazy and I cannot seem to figure out why it keeps coming up as my controller being undefined.

Here is my code;

app.js

var app = angular.module("hipstagram", ['ngResource']);

assets/javascripts/angular/services/main.js

    app.factory('instagram', function($resource){
    return {
        fetchPopular: function(callback){

            var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
                client_id: 'MY_CLIENT_ID'
            },{
                fetch:{method:'JSONP'}
            });

            api.fetch(function(response){
                callback(response.data);

            });
        }
    }
});

assets/javascripts/angular/controllers/main_ctrl.js

function MainController($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

});

index.html.erb

<div ng-app="hipstagram" ng-controller="MainController">

    <div class="bar">
    </div>

    <ul ng-show="layout == 'grid'" class="grid">
        <!-- A view with big photos and no text -->
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
        </li>
    </ul>

    <ul ng-show="layout == 'list'" class="list">
        <!-- A compact view smaller photos and titles -->
        <li ng-repeat="p in pics">
            <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
            <p>{{p.caption.text}}</p>
        </li>
    </ul>
</div>

From my troubleshooting, maybe angular is unable to access main controller, or I just named it wrong. If that is the case, any tips on how to get passed this would be great, I am stumped. Thanks for the help.

Upvotes: 0

Views: 322

Answers (2)

triggerNZ
triggerNZ

Reputation: 4761

Instead of defining a global MainController function, do something like this:

app.controller('MainController', function ($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

});

That registers the controller with the angular app so it can be used and dependency injected.

Upvotes: 1

Darshan P
Darshan P

Reputation: 2241

var app = angular.module("hipstagram", ['ngResource']);
app.controller("MainController", ["$scope", "instagram" ,function($scope, instagram){

    $scope.layout = 'grid';

    $scope.pics = [];

    instagram.fetchPopular(function(data){

        $scope.pics = data;
    });

}]);

Upvotes: 2

Related Questions