CODEWITHSUNDEEP
angularjsangularjs-scope
Ashish Patel
Ashish Patel

Reputation: 3614

Argument with 'controller' is not a function, got undefined

I have found similar question but not getting solution so i have post a question. I have been implementing and displaying data from database in angular js, below is mu code.

index.php file:

<header>
<script type='text/javascript' src='local-path/js/angular.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/angular-route.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/scripts.js?ver=4.9.5'></script>
</header>

<div ng-controller="mycontrollermenu">
            First Name: {{firstname}}
            </div>

<div ng-view></div>

<footer></footer>

script.js:

var app = angular.module('wp',['ngRoute','  ']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider  
    .when('/', {
        templateUrl : localized.partials + 'main.php',
        controller  :  'Main'
    })
    .when('/:slug', {
        templateUrl: localized.partials + 'content.html',
        controller: 'Content'
    })
    .otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(true);
});

app.controller('Main',function($scope, $http, $routeParams){    
    $http.get('wp-json/wp/v2/posts/').success(function(res){                
        $scope.posts = res;     
    });

});

app.controller('Content',
        ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {                     
            $http.get('wp-json/wp/v2/posts/?slug=' + $routeParams.slug).success(function(res){                                                
                $scope.post = res[0];
            });
        }
    ]
);


app.filter('removeHTMLTags', function() {
    return function(text) {
        return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
});

app.controller('mycontrollermenu',function($scope){
    $scope.firstname = "Menu 1";        
});

I have added controller mycontrollermenu in to index and js file which is not working, and thow an error like "Argument 'mycontrollermenu' is not a function, got undefined"

can any one guide me what i have doen wrong in "mycontrollermenu" controller?

Upvotes: 0

Views: 71

Answers (2)

Jaime Cuellar
Jaime Cuellar

Reputation: 474

Try creating a new .js file like MenuController.js and add the same

app.controller('mycontrollermenu',function($scope){
$scope.firstname = "Menu 1";        
 });

and in your index.html add <script type='text/javascript' src='MenuController.js'></script>

Upvotes: 1

Ashwin Aggarwal
Ashwin Aggarwal

Reputation: 657

A couple of questions,

  • ng-app needs to be there on the root element. Wrap your HTML like <div ng-app="wp">...<div>

  • localized is a global variable? It is neither injected nor declared.

  • There is an empty string in the module definition. Forgot to include a dependency?

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

Here I have a fiddle working with your code.

Upvotes: 0

Related Questions