Angular route not firing controller

Question

I'm having issue getting the controllers for my routes to execute.

Basically, I register my routes as follows:

var App = angular.module('App', ['ngRoute', 'routesControllers']);

App.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
        when('/', {
            template: " ",
            controller: 'NewOrderCtrl'
        }).
        when('/:companyName/:orderNumber', {
            template: " ",
            controller: 'ViewOrderCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
}]);

Here, I am not defining anything in the template because I use my routes to fire ajax GETs.

My controllers are as follows:

var routesControllers = angular.module('routesControllers', []);

routesControllers.controller('NewOrderCtrl', ['OrderManagerFactory', function(OrderManagerFactory) {

  alert('NewOrderCtrl fired!');

  //create a new empty company and order
  OrderManagerFactory.createNewCompany();
  OrderManagerFactory.createNewOrder();

}]);

routesControllers.controller('ViewOrderCtrl', ['OrderManagerFactory', '$routeParams', function(OrderManagerFactory, $routeParams) {

  alert('ViewOrderCtrl fired!');

  //Fire a bunch of ajax calls using the data from $routeParams

}]);

I also put a div for my empty view:

<div ng-view ng-controller="ViewOrderCtrl"></div>

And when I visit #/tesla/x123xfor example, I get nothing. The alert() in either one of the controllers does not execute...

Can somebody help? What am I missing?

Can you see any errors on console? what is your order of loading the scripts? (are you loading the angularjs route?) — Ziv Weissman, Aug 18 '15 at 20:38
The console is empty. The order in which the scripts are loaded are as follows: angular.js, angular-route.js, app.js — Oli, Aug 18 '15 at 20:43

Matt Tester · Accepted Answer · 2015-08-18T21:18:31.693

You could instead use resolve rather than trying to use the controller ... in a way, it's not really a controller you have there.

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

So something like:

 $routeProvider.when('/', { resolve: { init: 'NewOrderService' } });

And change the controller to be factory or service:

routesControllers.service('NewOrderService', ['OrderManagerFactory', function(OrderManagerFactory) {

  alert('NewOrderService fired!');

  //create a new empty company and order
  OrderManagerFactory.createNewCompany();
  OrderManagerFactory.createNewOrder();

}]);

Edit

If the route has some parameters, these can be accessed via $routeParams.

It's not a reusable pattern to have the factory/service depend on $routeParams, so updating the resolve property to use a function will help:

From the docs again:

Be aware that ngRoute.$routeParams will still refer to the previous route within these resolve functions. Use $route.current.params to access the new route parameters, instead

how would I pass data to the factory from the url? The url being of the format "/:companyName/:orderNumber" and I want companyName and orderNumber. — Oli, Aug 18 '15 at 21:11
Thanks! Ok so although this was not the root of my issue (My issue being me attaching the ng-app attribute to the tag instead of the ), I am still marking it as the accepted answer because it is IMO the best way of doing what I was attempting to do. Cheers! — Oli, Aug 18 '15 at 21:24
Great that helped! Ah, so yes, the ng-app in the wrong place would cause an issue :) — Matt Tester, Aug 18 '15 at 21:34

Angular route not firing controller

1 Answers1