Want to call external controller for angular route

Question

I have angular routes working, but I am getting stuck on particular piece I am not sure is possible. I want to use an external controller file.

Example of working code:

 app.config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/', {
                templateUrl: '/AngularViews/Home/index.html'
            }).when('/Login', {
                templateUrl: 'AngularViews/Account/index.html',
                controller: 'registerUser'
            }).otherwise({ redirectTo: '/'});
    });

    app.controller('registerUser', function($scope) {
        $scope.hello = 'test';
    })

What I want to do is something more like so:

app.config(function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            templateUrl: '/AngularViews/Home/index.html'
        }).when('/Login', {
            templateUrl: 'AngularViews/Account/index.html',
        }).otherwise({ redirectTo: '/'});
});

HTML for Template Login:

<script src="../../AngularScripts/Account/account.js"></script>
REGISTRATION

<div ng-controller="registerUser">
    {{hello}}
</div>

Account.js file:

app.controller('registerUser', function($scope, data) {
    $scope.hello = 'hello';
    $scope.registerUser = function () {
        var createData = {
            "UserName": $scope.email,
            "Password": $scope.password,
            "ConfirmPassword": $scope.confirmpass
        };
        console.log(createData);
        return createData;
    };
})

When doing it the second way it keeps telling me registerUser is undefined because it can't find registerUser

possible duplicate of [AngularJS Dynamic loading a controller](http://stackoverflow.com/questions/17674945/angularjs-dynamic-loading-a-controller) — a better oliver, May 25 '14 at 08:36
Take a look at [http://ify.io/lazy-loading-in-angularjs/](http://ify.io/lazy-loading-in-angularjs/) — a better oliver, May 25 '14 at 08:46
Those other posts aren't exactly what I am looking for I believe. If they are what I am looking for they aren't clear enough — allencoded, May 25 '14 at 16:28

Mohammad Sepahvand · Accepted Answer · 2014-05-25T04:37:37.947

2

Your registerUser controller must be defined in the same app as the one your routes are defined in. If it's in another module that module needs to be injected as a dependency in your main app, and the script for registerUser controller must be brought in at the same time as your app definition. See plunk.

edited May 25 '14 at 04:37

answered May 25 '14 at 04:18

Mohammad Sepahvand

17,364
22
81
122

So I seen you bought in the script "registerUserController" to the main index. With that wouldn't I have to bring in all my controllers. I wanted to bring in only the ones I need when I am on those views. – allencoded May 25 '14 at 16:19
In that case you need something like [this](http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx), It's what Im using to lazy load my controllers in a huge angular project. – Mohammad Sepahvand May 26 '14 at 03:58

score 0 · Answer 2 · answered May 26 '14 at 15:18

app.controller('registerUser', function($scope, data) {

When this is called, then almost nothing happens. angular.module.controller tells angular that you want to register a controller, but the real registration happens later, when the application gets bootstrapped. Consequently any call during a running application is fruitless.

Registration of controllers is done via $controllerProvider.register(name, function). Unfortunately you cannot directly access the $controllerProvider when the application is already running. We need to cheat. Add the following to your configuration block:

app.config(function($locationProvider, $routeProvider, $controllerProvider) {
  ...
  app.$controllerProvider = $controllerProvider;

In your Account.js file you can instantiate the controller with

app.$controllerProvider.register('registerUser', function($scope, data) {

Want to call external controller for angular route

2 Answers2