角度路线没有发射控制器

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/x123x for example, I get nothing. The alert() in either one of the controllers does not execute...

Can somebody help? What am I missing?

Answer 1

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