Angular load custom controller

Question

Is it possible to load a custom controller specifying the filename each partial in angularjs?

Something like this:

 var demo = angular.module('demo', ['ngRoute', 'ui.bootstrap', 'demo.filters', 'demo.services', 'demo.directives', 'demo.controllers'])

    .config(['$routeProvider', function ($routeProvider) {


        $routeProvider.when('/custom', 
                   {
                      templateUrl: 'partials/custom.html', 
                      controller:   customController.js
                    });

    });

Logan Murphy · Accepted Answer · 2014-10-18 20:45:43Z

3

+25

With the way require js works you need to set your app up like this:

var demo = angular.module('demo', ['ngRoute', 'demo.filters', 'demo.services', 'demo.directives']);

demo.config(['$routeProvider',
  function($routeProvider) {
    var _routes = ['/custom', '/custom2'];
    _routes.map(function(route) {
      var _cntrlName = route.slice(1, route.length);
      require([_cntrlName + "Controller"], function(controller) {
        $routeProvider.when(route, {
          templateUrl: '.' + route + '.html',
          controller: controller
        });
      });
    });
  }
]);

And your controller code must look like this:

define(function(require, exports, module) {
  function controller($scope) {
    $scope.testvar = "test 1!";
  }
  module.exports = controller;
});

Here is a plunker to demonstrate this http://plnkr.co/edit/N5fE5rezf6eM8jDIz23w?p=info

edited Oct 18, 2014 at 20:45

answered Oct 17, 2014 at 14:36

Logan Murphy

6,2403 gold badges28 silver badges44 bronze badges

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

1 Comment

Danilo Over a year ago

I tried your solution but unfortunatly it still not working plnkr.co/edit/WZaJDbSoAhf22G3iC5DL?p=preview

falloff · Accepted Answer · 2014-09-30 14:20:57Z

2

Angular is not able to load JS files, but you can do this with RequireJS

var demo = angular.module('demo', ['ngRoute', 'ui.bootstrap', 'demo.filters', 'demo.services',     'demo.directives'])

demo.config(['$routeProvider', function ($routeProvider) {
    var _routes = ['/custom', '/somepage']

    _routes.map(function(route){
        var _cntrlName = route.slice(1, route.length);
        $routeProvider.when(route,{
             templateUrl: 'partials' + route;
             controller: require('./' + _cntrlName + 'Controller.js');
        })     
    })  
});

Controller file:

(function(){
   function customController($scope){
       console.log($scope);   
   };
   return 'customController';  
)()

edited Sep 30, 2014 at 14:20

answered Sep 30, 2014 at 11:33

falloff

2453 silver badges10 bronze badges

5 Comments

Danilo Over a year ago

This is exactly what I need, but probably there are some mistakes in the code. Could you kindly provide to create a working fiddle? Thank you so much

falloff Over a year ago

Fixed the code, but i can't reproduce this on fiddle, there is no file system.

Danilo Over a year ago

..it doesn't work yet, and the error is the same on my main project. plnkr.co/edit/RfRFPq2OVNr5I6iGVtdq?p=preview

falloff Over a year ago

Later today i do it localy and give you link to repository.

Logan Murphy Over a year ago

you should try using plunker

Kamil R · Accepted Answer · 2014-09-30 11:25:13Z

0

Instead of specifying a file put the controller's name. However, you should remove ng-controller directive from your partial.

answered Sep 30, 2014 at 11:25

Kamil R

4475 silver badges12 bronze badges

Comments

Rahul Pal · Accepted Answer · 2014-10-17 12:36:59Z

0

Yes. you can load the other controller scope inside a different controller.

Sample Code:
var mode = angular.module().config(function(){

controller("controllerName",{$scope : scope}); // This line is important

});

answered Oct 17, 2014 at 12:36

Rahul Pal

967 bronze badges

Collectives™ on Stack Overflow

Angular load custom controller

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related