title: AngularJS RouteParams
body: <p>I dont understand why but when i console.log() both box and box.color its telling me its undefined...I tried many different methods to solve this problem but it all failed.</p>
  
  <p><a href="https://ide.c9.io/amanuel2/chattapp" rel="nofollow noreferrer">Cloud9</a></p>
  
  <p><a href="https://plnkr.co/edit/ToWpQCw6GaKYkUegFjMi?p=preview" rel="nofollow noreferrer">Plunker</a> </p>
  
  <p>And here is script.js:</p>
  
  <pre><code>var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies"])
  
  
  app.provider("box", function ()
  {
      var hex = "SomeColor";
      var UID = 3;
      return {
          setColor: function (value)
          {
              UID = value
          },
          $get: function ()
          {
              return {
                  color: hex
              }
          }
      }
  })
  
  app.config(function ($routeProvider, $cookiesProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'HtmlFiles/registration.html',
          controller: 'regController'
        })
       .when('/logIn', {
          templateUrl: 'HtmlFiles/login.html',
          controller: 'loginController'
        })
  
        .when('/Chat', {
          templateUrl: 'HtmlFiles/Chat.html',
          controller: 'chatController'
  
        })
        .when('/Test' , {
          template: '&lt;h3&gt;This is just a testing phase&lt;/h3&gt;',
          controller: 'Testing'
        })
  
        .when('/userSettings', {
          templateUrl: 'HtmlFiles/userSettings.html',
          controller: 'userSettingsController'
  
        })
  
        .when('/room', {
          templateUrl: 'HtmlFiles/room.html',
          controller: 'roomController'
        })
  
        .otherwise({
          redirectTo: '/'
        }); 
  });
  
  app.controller('Testing', ["$scope","roomService", "roomProvider",  function($scope, roomService, roomProvider){
    console.log("This is from the Controller Service: " + roomService.room.roomUID)
    console.log("This is from the Controller Provider: " + roomProvider.$get)
    }
  ])
  app.factory("Auth", ["$firebaseAuth",
    function($firebaseAuth) {
      var ref = new Firebase("https://chattappp.firebaseio.com/");
      return $firebaseAuth(ref);
    }
  ]);
  
  app.factory("Ref", function(){
     var ref = new Firebase("https://chattappp.firebaseio.com/")
     return ref;
  })
  
  app.factory("UniPosts" , function(){
    var ref = new Firebase("https://postss.firebaseio.com/")
     return ref;
  });
  
  app.service('getCookieService', ["$cookieStore", "$scope", 
            function($cookieStore, $scope){
              this.getCookie = function(name){
                $cookieStore.get(name)
              }
            }
      ])
  </code></pre>
  
  <p>roomController.js:</p>
  
  <pre><code>app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http",
      function($scope, Auth, Ref, AuthService, roomService, $http,box) {
      // Sweet Alert :)
       function generateRandomStringToken(length) {
              var string = "";
              var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
              for (var i = 0; i &lt; length; i++){
                  string += characters.charAt(Math.floor(Math.random() * characters.length));
              }
              return string;
          }
  
          swal({
              title: "Room",
              text: "What do you want your room name to be?",
              type: "input",
              showCancelButton: true,
              closeOnConfirm: false,
              animation: "slide-from-top",
              inputPlaceholder: "Write something"
          }, function(inputValue) {
              if (inputValue === false) return false;
              if (inputValue === "") {
                  swal.showInputError("You need to write something!");
                  return false
              }
              swal("Nice!", "You wrote: " + inputValue, "success");
               $scope.$apply(function () {
              $scope.roomNameModel = inputValue
              });
  
             console.log($scope.roomNameModel)
      var redirectPage = generateRandomStringToken(10)
       console.log("User gets redirected to : " + redirectPage + " ...")
       roomService.setRoomUID(redirectPage);
       console.log(roomService.room.roomUID)
       console.log(box) //Undefined...
       console.log("From Provider : " + box.color)//box.color is undefined..
  
  
          });
  
  
  
  
      }
  ])
      //window.location.hash = "/Test"
  </code></pre>
  
  <p><strong><h1>EDIT 2</h1></strong>: Ok Now it works but im confused on how to use it on app.config.. i My provider is Hash:</p>
  
  <pre><code>app.provider("Hash", function ()
      {
          var UID = 0;
          return {
              $get: function ()
              {
                  return {
                      setHash: function (value)
                      {
                          UID = value;
                      },
                      getHash: function()
                      {
                          return UID;
                      }
                  }
              }
          }
      })
  </code></pre>
  
  <p>And when it goes to the controller i set the hash and get the has ... roomControler.js:</p>
  
  <pre><code>app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash",
          function($scope, Auth, Ref, AuthService, roomService, $http,Hash) {
      // Sweet Alert :)
       function generateRandomStringToken(length) {
              var string = "";
              var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
              for (var i = 0; i &lt; length; i++){
                  string += characters.charAt(Math.floor(Math.random() * characters.length));
              }
              return string;
          }
  
          swal({
              title: "Room",
              text: "What do you want your room name to be?",
              type: "input",
              showCancelButton: true,
              closeOnConfirm: false,
              animation: "slide-from-top",
              inputPlaceholder: "Write something"
          }, function(inputValue) {
              if (inputValue === false) return false;
              if (inputValue === "") {
                  swal.showInputError("You need to write something!");
                  return false
              }
              swal("Nice!", "You wrote: " + inputValue, "success");
               $scope.$apply(function () {
              $scope.roomNameModel = inputValue
              });
  
             console.log($scope.roomNameModel)
      var redirectPage = generateRandomStringToken(10)
       console.log("User gets redirected to : " + redirectPage + " ...")
       roomService.setRoomUID(redirectPage);
       console.log(roomService.room.roomUID);
       Hash.setHash(redirectPage);
       console.log("From Provider : " + Hash.getHash())
      window.location.hash = "/Test"
          });
  
  
  
  
      }
  ])
  </code></pre>
  
  <p>Now what i want to do is in my app.config() i want to say when it is in Hash.getHash()   Go to template: , and controller: </p>
  
  <p>So something like this....</p>
  
  <pre><code>    app.config(function ($routeProvider, $cookiesProvider, Hash) {
          $routeProvider.
           when('/' + Hash.getHash(), {
                 template: '&lt;h4&gt; Your in Room',
                 controller: 'Test
                  })
  });
  
  app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
    console.log("This is from the Controller Service: " + roomService.room.roomUID)
    console.log(Hash.getHash())//This Logs right. :D
    }
  ])
  </code></pre>
  
  <h1>EDIT 3</h1>
  
  <p>What i was trying to say earlier was that i want to somehow configure the randomly generated Hash in my app.config() when statements. so in my app.config. WHEN the USER is in /RANDOMLYGENERATEDHASH  have a template: <code>'&lt;h1&gt;Test&lt;/h1&gt;'</code> . This is what i tried but dosent workk...</p>
  
  <p>It is the fourth one on the .when() Statements..</p>
  
  <pre><code>app.config(function ($routeProvider, $cookiesProvider, HashProvider){
      $routeProvider
        .when('/', {
          templateUrl: 'HtmlFiles/registration.html',
          controller: 'regController'
        })
       .when('/logIn', {
          templateUrl: 'HtmlFiles/login.html',
          controller: 'loginController'
        })
  
        .when('/Chat', {
          templateUrl: 'HtmlFiles/Chat.html',
          controller: 'chatController'
  
        })
        .when('/' + HashProvider , {
          templete: '&lt;h1&gt;Test&lt;/h1&gt;'
        })
        .when('/userSettings', {
          templateUrl: 'HtmlFiles/userSettings.html',
          controller: 'userSettingsController'
        })
        .when('/room', {
          templateUrl: 'HtmlFiles/room.html',
          controller: 'roomController'
        })
  
        .otherwise({
          redirectTo: '/'
        }); 
  });
  </code></pre>
  
  <p>And here is the provider now..</p>
  
  <pre><code>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
              }
          }
      }
  })
  </code></pre>
  
  <h1>EDIT 4</h1>
  
  <p>Ok This is my roomcontroller.js Now..:
  (Important detail at bottom of controller)</p>
  
  <pre><code>app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash","$routeParams",
          function($scope, Auth, Ref, AuthService, roomService, $http,Hash, $routeParams) {
      // Sweet Alert :)
       function generateRandomStringToken(length) {
              var string = "";
              var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
              for (var i = 0; i &lt; length; i++){
                  string += characters.charAt(Math.floor(Math.random() * characters.length));
              }
              return string;
          }
  
          swal({
              title: "Room",
              text: "What do you want your room name to be?",
              type: "input",
              showCancelButton: true,
              closeOnConfirm: false,
              animation: "slide-from-top",
              inputPlaceholder: "Write something"
          }, function(inputValue) {
              if (inputValue === false) return false;
              if (inputValue === "") {
                  swal.showInputError("You need to write something!");
                  return false
              }
              swal("Nice!", "You wrote: " + inputValue, "success");
               $scope.$apply(function () {
              $scope.roomNameModel = inputValue
              });
  
             console.log($scope.roomNameModel)
      var redirectPage = generateRandomStringToken(10)
       console.log("User gets redirected to : " + redirectPage + " ...")
       roomService.setRoomUID(redirectPage);
       console.log(roomService.room.roomUID);
       Hash.setHash(redirectPage);
       console.log("From Provider : " + Hash.getHash())
       $routeParams.hash = Hash.getHash()
  
          });
  
  
  
  
      }
  ])
  </code></pre>
  
  <p>and script.js(Note this is not the only ones i have. You can see all other on above link on Cloud9(Plunk not updated)):</p>
  
  <pre><code>var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies", 'ngMessages'])
  
  
  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
              }
          }
      }
  })
  
  app.config(function ($routeProvider, $cookiesProvider, HashProvider){
      $routeProvider
        .when('/', {
          templateUrl: 'HtmlFiles/registration.html',
          controller: 'regController'
        })
       .when('/logIn', {
          templateUrl: 'HtmlFiles/login.html',
          controller: 'loginController'
        })
  
        .when('/Chat', {
          templateUrl: 'HtmlFiles/Chat.html',
          controller: 'chatController'
  
        })
      .when('/:Hash', {
              template: '&lt;h1&gt;TEST TEST&lt;/h1&gt;',
              controller: 'any controller'
          })
        .when('/userSettings', {
          templateUrl: 'HtmlFiles/userSettings.html',
          controller: 'userSettingsController'
        })
        .when('/room', {
          templateUrl: 'HtmlFiles/room.html',
          controller: 'roomController'
        })
  
        .otherwise({
          redirectTo: '/'
        }); 
  });
  
  app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
    console.log("This is from the Controller Service: " + roomService.room.roomUID)
    console.log(Hash.getHash())
    }
  ])
  app.factory("Auth", ["$firebaseAuth",
    function($firebaseAuth) {
      var ref = new Firebase("https://chattappp.firebaseio.com/");
      return $firebaseAuth(ref);
    }
  ]);
  
  app.factory("Ref", function(){
     var ref = new Firebase("https://chattappp.firebaseio.com/")
     return ref;
  })
  
  app.factory("UniPosts" , function(){
    var ref = new Firebase("https://postss.firebaseio.com/")
     return ref;
  });
  
  app.service('getCookieService', ["$cookieStore", "$scope", 
            function($cookieStore, $scope){
              this.getCookie = function(name){
                $cookieStore.get(name)
              }
            }
      ])
  
  
  
  
    [1]: https://ide.c9.io/amanuel2/chattapp
    [2]: https://plnkr.co/edit/ToWpQCw6GaKYkUegFjMi?p=preview
  </code></pre>