Angularjs - How to Use $Routeparams in Generating the Templateurl

AngularJS - How to use $routeParams in generating the templateUrl?

I couldn't find a way to inject and use the $routeParams service (which I would assume would be a better solution) I tried this thinking it might work:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

Which yielded this error:

Unknown provider: $routeParams from myApp

If something like that isn't possible you can change your templateUrl to point to a partial HTML file that just has ng-include and then set the URL in your controller using $routeParams like this:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

With this as your urlRouter.html

<div ng-include src="templateUrl"></div>

Angular-route : how to switch template from `resolve` method?

A better and clean way is to have 2 routes, say /secretpage and /secretless and redirect based on the privilege using below route configuration:

$routeProvider
  .when('/secretpage' ,{
    templateUrl: "templates/secretpage.html",        
    resolve:{
        "check":function(accessFac,$location){  
            if(!accessFac.checkPermission()){    
               $location.path('/secretless')
            }
        }
    }
  })
  .when('/secretless', {
    templateUrl: "templates/secretlesspage.html",
    resolve: {
      "check":function(accessFac,$location){  
        if(accessFac.checkPermission()){    
           $location.path('/secret')
        }
      }
    }

  })

How i can transmit params from GET into templateUrl in $routeProvider in Angular?

I don't believe that's possible. The idea behind it is that there is a strict seperation of concerns in AngularJS, which in this case leads to your template and your data being seperated.

You should simply retrieve a template, filled with AngularJS databinding expressions, and do another HTTP request to retrieve the data and bind it to the template through $scope. AngularJS is smart enough to cache the template after the first load.

p.s. Welcome to StackOverflow!

AngularJS - Using NgRoute's params in a controller name

You could do something like below, not cleaner one. But it will work

controller: function($scope, $controller, $routeParams){
     $controller($routeParams.lesson + 'Ctrl', {$scope: $scope});
}

Handling such situation will be easier, if you will look at ui.router, which has controllerProvider which will work like you were trying.

AngularJS RouteParams

There are two problems in your code:

1. Definition of "roomController"

   app.controller('roomController', ["$scope", "Auth", "Ref", 
                  "AuthService", "roomService","$http", 
                  function($scope, Auth, Ref, AuthService, roomService, 
                  $http,box) {})
   

Just match the parameters and their declarations and you will see that you missed a declaration for the "box" parameter. The correct "roomController" definition should be like this:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

2. "box" provider. You defined "setColor" method as the configuration method of provider, but you are trying to use it as a provider result method. The corrected version should be like this:

   app.provider("box", function ()
   {
       var hex = "SomeColor";
       var UID = 3;
       return {
           $get: function ()
           {
               return {
                   color: hex,
                   setColor: function (value)
                   {
                       UID = value
                   }
               }
           }
       }
   })
   

Angular Providers

Answer to EDIT2:

You defined HashProvider. To configure it in app.config you should pass argument as HashProvider (not just Hash, BUT when you will try to use it anywhere except app.config you should inject it as Hash). So your app.config declaration should be like this:

app.config(function ($routeProvider, $cookiesProvider, HashProvider)

...and to let you access the getHash method it's necessary to move it to the provider configuration, for example like this:

app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

Answer to EDIT3:

Now I got what you are trying to do. And the thing is that you are trying to do it wrong :). The right way is more simple. You have to configure route with param, for example like this:

.when('/:hash', {
    template: '<h1>TEST TEST</h1>',
    controller: 'any controller'
})

And place it just after your last route. After that, in controller you may access hash by using $routeParams object. For example like this:

$routeParams.hash

And after that in controller you may analyze if it's right hash and do necessary stuff, or redirect user somewhere if hash is invalid.

---

Related Topics