Dynamic Routes with Crud in 1 Controller

2018-06-27 18:38:06

I am able to successfully utilize dynamic routes. I would also like NOT to separate CRUD functionality in my different controllers (ie. keep CRUD in one controller per object).

Per this question, I altered my routes Using same controller for all CRUD operations (Rails-alike) by adding resolve per Stewie's recommendation :

I figured it out, but SO won't let me post solution below so here it is:

1. Routes

angular.module('anuRoutes', [])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', { templateUrl: '/App_Angular/partials/Common/Welcome.html' });
    $routeProvider.when('/:name', {
        templateUrl: '/App_Angular/partials/Common/Welcome.html',
        controller: PagesCtrl,
        action: 'list' 
    });
    $routeProvider.when('/:name/:id', {
        templateUrl: '/App_Angular/partials/Common/Welcome.html',
        controller: PagesCtrl,
        action: 'show'
    });
    $routeProvider.when('/:name/new', {
        templateUrl: '/App_Angular/partials/Common/Welcome.html',
        controller: PagesCtrl,
        action: 'new'
    });
    $routeProvider.when('/:name/:id/edit', {
        templateUrl: '/App_Angular/partials/Common/Welcome.html',
        controller: PagesCtrl,
        action: 'edit'
    });
    $routeProvider.otherwise({ redirectTo: '/App_Angular/partials/Common/Welcome.html' });
}]);

2. Pages Controller:

function PagesCtrl($scope, $http, $route, $routeParams, $compile, anuCache) {

var pageName = ($routeParams.name).replace("_", "/");
console.log('name:' + pageName);
$route.current.templateUrl = '/App_Angular/partials/' + pageName + ".html";

});

3. Passenger Controller:

angular.module('anuPassengerVehicles', [])

.controller('PassengerVehiclesCtrl', function ($scope, $timeout, PassVehSvc, $route) {

$scope.ControllerName = "PassengerVehiclesCtrl";
$scope.PassVehs = [];

var crudAction = $route.current.action;

 if(crudAction === 'list'){
  PassVehSvc.GetPassVehs().
  then(function(config, data, headers, status) {
     $scope.PassVehs = arguments[0].data;
    // console.log(arguments[0].data);
  }

 if(crudAction === 'edit'){
  .....
   }

 if(crudAction === 'new'){
  .....
   }

 if(crudAction === 'show'){
  .....
   }

 });

Error [$injector:unpr] looks for me like my (fresh error): "Error: [$injector:unpr] Unknown provider : $scopeProvider <- $scope <- usersFactory"

There are several reasons that can generate such a mistake:

1) no application initialization (ng-app) in an HTML document

2) or doubling initialization (ng-app)

<html ng-app>
<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

3) sometimes can override a module in two places, for example, code like this in once by doing:

angular.module ('MyService' ...
). factory (...);

then a bit down the same file

angular.module ('MyService' ...
.) value ('version', '0 .1 ');

4) is sometimes added $scope - and should not

My BAD syntax:

myControllers.factory('usersFactory', ['$http','$scope', function($scope,$http){...}

WORKING:

myControllers.factory('usersFactory', ['$http',function($scope,$http){...}

5) Another surprise: whitespace in the array values:

controller('myCtrl', ['$scope', '$timeout ' (...)