Loading Controllers Separately using Controller As Syntax and ngRoute

Question

I have the following Angular Module, Routes and Controllers inside my index.js file. Nothing complex. So far I load this one javascript file into my Index.html file and everything work fine so far as I have the ng-app & ng-view in the Index.html file. Simple enough

// /ng-modules/render-index.js
angular
    .module("homeIndex", ["ngRoute"])
    .config(config)
    .controller("homeController", homeController)
    .controller("aboutController", aboutController);

function config($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/ng-templates/homeView.html",
            controller: "homeController",
            controllerAs: "vm"
        })
        .when("/about", {
            templateUrl: "/ng-templates/aboutView.html",
            controller: "aboutController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};

function homeController() {
    var vm = this;
    vm.title = "Home Page";
};

function aboutController() {
    var vm = this;
    vm.title = "About Us";
};

Now I understand that to break this apart at this point in time would be silly because if this was all I was using angular for, why not just keep it all in one javascript file. Understood, But I want to know how to separate these things properly at this level so that I have a basic understanding.

Here is what I want to do. I want to separate the two controllers (homeController & aboutController) to their own files. I also want to know what to do with the routes. DO they get moved into their own javascript file, do they stay in the index.js file? I want to assume that these two controllers will eventually do something complex and therefore I am separating them now.

QUESTION: Using the (Controller as syntax) How exactly do I do this and what does the index.js file look like and the two home.js and about.js files look like when they have been separated?

What I have tried: I have tried to put each controller into their own file and inject them into the index.js file

    angular
    .module("homeIndex", ["ngRoute", "homeController", "aboutController])

I had left the routing inside that file. FOr some reason I was either using the wrong syntax or doing it wrong.

kodebot · Accepted Answer · 2015-03-18 01:43:13Z

1

What you tried don't work because you are trying to load controllers as module dependency.

You can split the files like this and add all of them in your index.html

// index.js
angular
    .module("homeIndex", ["ngRoute"]);


//route.js
angular
    .module("homeIndex")
    .config(config);
function config($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/ng-templates/homeView.html",
            controller: "homeController",
            controllerAs: "vm"
        })
        .when("/about", {
            templateUrl: "/ng-templates/aboutView.html",
            controller: "aboutController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};


// homeController.js
angular
    .module("homeIndex")
    .controller("homeController", homeController)
function homeController() {
    var vm = this;
    vm.title = "Home Page";
};

// aboutController.js
angular
    .module("homeIndex")
    .controller("aboutController", aboutController);
function aboutController() {
    var vm = this;
    vm.title = "About Us";
};

answered Mar 18, 2015 at 1:43

kodebot

1,7881 gold badge22 silver badges31 bronze badges

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

1 Comment

Eric Bishard Over a year ago

Exactly what I was looking to do. I know that there are a lot of other things to think about like services and such, but at the most basic level I wanted to know this using Controller as. Thank you for your time! Learning one step at a time...

Collectives™ on Stack Overflow

Loading Controllers Separately using Controller As Syntax and ngRoute

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