AngularJS and RequireJS add controller to view

Question

I have a problem with adding a Angular controller to my HTML view. The angular way of doing this is: ng-controller="<controller>". But because I am using RequireJs I have to do this in a different way. I have to add a sub page to every controller and view:

define(['app', 'login/LoginController'], function (app, LoginController) {

    app.config(function ($routeProvider, $locationProvider) {

        $routeProvider.when('/', {
            templateUrl: "modules/" + 'login/login.html',
            controller: LoginController
        });
    });
    app.controller('LoginController', LoginController);

});

This way I can define my where my controller is and where my view is.

Problem

Now I have a header.html in which I want to include a menu.html. this can be done via: ng-include="'modules/menu/menu.html'". This works fine. But how can I add a controller to this menu.html?

I have tried: ng-controller="MenuController" but then I get the error: 'Error: [ng:areq] Argument 'MenuController' is not a function, got undefined'. So I do not know how I should add a controller to my menu.html with RequireJS.

MenuController

my MenuController looks as follows:

define(['$'], function ($) {
    'use strict';

    var MenuController = function ($location, menu, $scope) {
        $scope.info="testing123";
    };
    return MenuController;
});

Anyone knows how I should do this?

You should register controller within the application that has this header.html. So it should be app.controller('MenuController', MenuController); where app is the app. — dfsq
– dfsq, Commented Dec 10, 2015 at 10:38
are you loading MenuController.js file before using ng-include? — vpsingh016
– vpsingh016, Commented Dec 10, 2015 at 10:38
@vpsingh016 I guess my view is loaded before my controller. But due to RequireJS, I cannot use 'ng-controller'. This will always result in an error — Mr.wiseguy
– Mr.wiseguy, Commented Dec 10, 2015 at 11:11
Use directive to load templete and respective controller. Then call directive inside header.html — gaurav bhavsar
– gaurav bhavsar, Commented Dec 10, 2015 at 12:40

Ankirama · Accepted Answer · 2015-12-10 10:42:21Z

2

You can for example use multiple views in the same controllerwith $stateProvider:

    app.config(function ($stateProvider, $locationProvider) {

    $stateProvider
    .state('login', {
        url: '/',
        views: {
            'menu': {
                templateUrl: 'modules/menu/menu.html',
                controller: MenuController
            },
            'login': {
                templateUrl: 'modules/login/login.html'
                controller: LoginController
            }
        }
    });
});

Then in your template to call them you just need to do something like:

<div ui-view="menu"></div>
<div ui-view="login"></div>

You can see more info on github ui-router.

answered Dec 10, 2015 at 10:42

Ankirama

4984 silver badges15 bronze badges

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

1 Comment

Mr.wiseguy Over a year ago

UI-Router fixed my problem. Now I can define a abstract template and dynamically change the different views on the template. I can also add a controller to every view.

Collectives™ on Stack Overflow

AngularJS and RequireJS add controller to view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related