URL Not Changing. Also: Asian Letters?

Language Help Angular.js
1

This has been mentioned but not answered.

Quote from last problem in Angular course:

Why are routes useful? Instead of filling a single view with more code than needed, routes let us map URLs to self-contained controllers and templates. Furthermore, now that the app has URLs, users can easily bookmark and share the app’s pages.

The bold text is not actually happening: When I click on a photo to go see more details about it, the url does not change and I can’t figure out a URL to input that brings me to that same page…I want a unique URL for each detail page.

Also what the heck is that Asian lettering at the bottom?

2

I Have no idea what your asking, but if your asking why Routing is neccecary… well it is HIGHLY IMPORANT basically, if you look at your URL Above it says:

https://discuss.codecademy.com/t/url-not-changing-also-asian-letters/40974

Well lets dig deeper. So ofcourse there is discuss.codecademy.com… and then you see that / . each / represents a url route. So that /t represents something. In my oppinon it represents, “a question in fourm”. And then another slash. The slash above it obviously represents the title of your question and then the slash after that represents a Random UID, made for your question… if you ask me why this all is made… well you want to seperate all questions in this fourm so they stay seperate and dont merge. So all of the fourm questions exist. If you want to see a more AngularJS Practical Example check out the config file of my fourm here: https://github.com/amanuel2/ng-forum/blob/master/config/mainConfig.js

Code:

(function(angular) {
  var app = angular.module('ForumApp');
  app.config(['$stateProvider', '$urlRouterProvider','$mdThemingProvider', stateParams])

  function stateParams($stateProvider, $urlRouterProvider,$mdThemingProvider) {


$mdThemingProvider.theme("default")
                  .primaryColor("blue")
                  .accentColor("red");
      
      
    $urlRouterProvider.otherwise('home')
    $stateProvider.state('home', {
      url: '/home',
      templateUrl: 'views/home.html',
      controller: 'homeCtrl',
    })
    $stateProvider.state('auth', {
      url: '/auth',
      templateUrl: 'views/auth.html',
      controller: 'authCtrl',
    })

    $stateProvider.state('authHome', {
      url: '/authHome',
      templateUrl: 'views/authHome.html',
      controller: 'authHome',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })

    $stateProvider.state('authHome.desc', {
      url: '/desc',
      templateUrl: 'views/authDesc.html',
      controller: 'authDescCtrl',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })

    $stateProvider.state('authHome.topic', {
      url: '/topic?AVATAR?DATE?EMAIL?TITLE?UID?USERNAME?VALUE?',
      templateUrl: 'views/topicDesc.html',
      controller: 'topicCtrl',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })
    $stateProvider.state('authHome.profile', {
      url: '/profile:UID',
      templateUrl: 'views/profile.html',
      controller: 'profileCtrl',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })

  $stateProvider.state('authHome.settings', {
      url: '/settings?UID?USERNAME',
      templateUrl: 'views/settings.html',
      controller: 'settingsCtrl',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })
    
     $stateProvider.state('authHome.otherUser', {
      url: '/otherUser?DATE?UID',
      templateUrl: 'views/otherUserProfile.html',
      controller: 'otherUserProfileCtrl',
      resolve: {
        // controller will not be loaded until $waitForAuth resolves
        // Auth refers to our $firebaseAuth wrapper in the example above
        "currentAuth": ["refService", function(refService) {
          // $waitForAuth returns a promise so the resolve waits for it to complete
          return refService.refAuth().$requireAuth();
        }]
      }
    })
  
  }
})(angular);

You can see im stating a stateProvider or a hash in this case for every “state” the user is in… so it stays seperate. Hope you understand.

1 Like
3

Updated question for clarity.

I appreciate you chiming in but I wasn’t asking why routing is useful but instead why it’s not working. What URL do you see when you click on one of the photos? Mine is not changing.

Thanks