Error while defining an angularjs controller

Question

I have an view (insight index.html) like that:

<body ng-app="mainApp" ng-controller="MainCtrl">
[...]
    <div>{{status}} </div>
</body>

I start the App onDeviceReady:

angular.element(document).ready(function() {
    angular.bootstrap(document);
});

I have this module:

var mainAppModul = angular.module('mainApp', ['ngRoute'])
         .config(function ($routeProvider, $compileProvider) {

       $routeProvider
         .when('/', {
         controller: MainCtrl,
         template: '<h1> Main View {{ status }} </h1>'        
         });
       $compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel):/);
    });

As far as I know, there are different ways to define a controller. One way is like that:

mainAppModul.controller('MainCtrl',['$scope', function ($scope)
 {
    $scope.status = "It works!";
}]);

The other one is like this:

function MainCtrl ($scope) 
{
   $scope.status = "It works!";
}

While the 1st Version results in [ng:areq] Argument 'MainCtrl ' is not a function, got undefined, the 2nd Version works fine.

Is there something I misunderstood in general?

m.e.conroy · Accepted Answer · 2014-03-14 14:03:01Z

1

ngRoute works in combination with ngView You won't need to specify the ng-controller in your templates, ngRoute takes care of that for you. When you have this:

var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
    $routeProvider
        .when('/', {
            // controller: MainCtrl, // EDIT: needs to be a string of the controller name
            controller: 'MainCtrl',
            template: '<h1> Main View {{ status }} </h1>'
        });
});

All you need is this:

<html ng-app="myApp">
    <body>
        <ng-view></ngview>
    </body>
</html>

ngRoute will put the template of the specified route into ng-view and use the associated controller.

Note: ngRoute does not come with angular.js, you'll need the angular-route.js included as well.

edited Mar 14, 2014 at 14:03

answered Mar 14, 2014 at 13:45

m.e.conroy

3,53828 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

The Bndr Over a year ago

I have ngRoute installed. I'm not sure, if your answer fits my question, because (i think) the route is not the problem. 2nd thing: ng-app="myApp" bootstraps my app, right? So this would be in conflict with angular.element(document).ready(function() { angular.bootstrap(document); }); But if I can't add ng-app on html-tag, so how can I connect the view with the controller? Shouldn't be there an ng-controller="MainCtrl"??

m.e.conroy Over a year ago

The route defines the controller to use, when it inserts the html fragment into ng-view You can define other controllers within your template but the controller defined in the route will be the parent controller. The way you defined your controller with mainAppModul.controller should be fine.

m.e.conroy Over a year ago

I just noticed this, the controller property of a route needs to be the string name of the controller you want to use. so it should be controller: 'MainCtrl'

m.e.conroy Over a year ago

With regards to your question of using angular.bootstrap(document); I've never had to use that in order to get angular running properly with ng-app in the <HTML> tag

Collectives™ on Stack Overflow

Error while defining an angularjs controller

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related