AngularJS adding controller dynamically

Question

I don't want to load all of my controllers. I have found some articles about loading a controller dynamically but haven't succeeded. I tried:

var premaApp = angular.module('premaApp', ['ngRoute']);
premaApp.config(function ($routeProvider) {
$routeProvider
    .when('/',
    {
        templateUrl: '/Home/Test',
        controller: 'personController',
        resolve: '/app/controllers/product.controller.js'
    });  
});

But I got an error. What is the right way to do this?

Check this: https://stackoverflow.com/questions/28184616/lazy-load-template-and-controller-in-angular-ui-router — Gonzalo Pincheira Arancibia, Sep 05 '17 at 19:18
I hoped there was something more simple :( But seems like its the way to go. — Thomas Segato, Sep 06 '17 at 15:00

score 0 · Answer 1 · answered Sep 05 '17 at 19:29

I think your problem is in resolve because you're using it in a wrong way.

I did this:

$routeProvider
    .when('/',
    {
            templateUrl: "newsView.html",
            controller: "newsController",
            resolve: {
                message: function(messageService){
                    return messageService.getMessage();
            }
        }
    })

A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

You can do this as well:

$routeProvider
        .when('/',
        {
                templateUrl: "newsView.html",
                controller: "newsController",
            }
        })

the resolve parameter is optional.

I hope that helps!

score 0 · Answer 2 · answered Sep 05 '17 at 20:42

0

This is how you use different views and controllers in angular routing

 .when('/', {
  templateUrl: 'partials/homepage.html',
  controller: 'Controller1'
})
.when('/test', {
  templateUrl: 'partials/test.html',
  controller: 'Controller2'
})
.when('/page/:pageId', {
  templateUrl: 'partials/page.html',
  controller: 'Controller2'
});

answered Sep 05 '17 at 20:42

Varun Sukheja

6,170
5
51
93

This requries all controllers to be loaded, even if you only visit one of the pages. If you have many controllers this is not optimal. – Thomas Segato Sep 06 '17 at 14:59

AngularJS adding controller dynamically

2 Answers2