CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-components
Noy Oliel
Noy Oliel

Reputation: 1686

angular.js:13424 Error: [ng:areq] Argument 'fn' is not a function, got Object

I'm new to programming in html/JS/AngularJS. I'm trying to implement a simple angular component but i keep getting errors. I looked at other answers and can't find the solution why this simple implementation is creating the error in the console (the error is mentioned in title). please help. picture of console out put 

var myApp = angular.module('RingShopApp', []);
function appctrlcontroller($scope) {

}
myApp.controller('appctrl', appctrlcontroller);
console.log("appctrl done");
myApp.component('ringtabs', {
	template: "<p>sdfsdfsdfsdfsdfdf</p>",
	//	templateUrl: 'html/Directives/tabs.html',
	controller: myApp.controller('appctrl')
});
console.log("ringtabs component");
    <!DOCTYPE html>
    <html >
      <head>
      </head>
    
      <body  ng-app="RingShopApp">
    	  <ringtabs></ringtabs>
    	
    	
    	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js'></script>
    	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
    	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js'></script>
    	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
    	<script  src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
    	<script src="js/index.js"></script>
    
        
        
        
      </body>
    </html>

Upvotes: 0

Views: 1086

Answers (2)

Noy Oliel
Noy Oliel

Reputation: 1686

@Sajeetharan posted an answer here that solved the problem but he deleted it from the comments. His answer was that I should change ".component" to ".directive" because it was a mixture of angular2 and of angular. This is the code that was edited. It seems to work fine:

var myApp = angular.module('RingShopApp', []);
function appctrlcontroller($scope) {

}
myApp.controller('appctrl', appctrlcontroller)
							
.directive('ringtabs', function(){
	return {
	templateUrl: 'html/Directives/tabs.html'
	//controller: myApp.controller('appctrl')
	};	
});
console.log("ringtabs component");

Upvotes: 0

dev
dev

Reputation: 841

You should be providing the controller function directly to your component instead of through the angular controller getter:

var myApp = angular.module('RingShopApp', []);
myApp.controller('appcontroller', appcontroller);
myApp.component('ringtabs', {
    template: "<p>sdfsdfsdfsdfsdfdf</p>",
    controller: 'appcontroller'
});

function appcontroller($scope) {
    ...
}

appcontroller.$inject = ['$scope'];

Be careful to add the $inject property to your controller to avoid potential problems with minification.

Upvotes: 1

Related Questions