1

I'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.

My code is the following

raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'raceApp/createChallenge_view.php',
            controller: 'createChallenge'
        })
        .when('/createchallenge', {
            templateUrl: 'raceApp/createChallenge_view.php',
            controller: 'createChallenge'
        })
        .when('/findchallenge', {
            templateUrl: 'raceApp/findChallenge_view.php',
            //controller: 'findChallenge'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

My HTML looks like

<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />

<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">

When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view ( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)

I am working with Wordpress.

I'm looking forward to your help!

1 Answer 1

6

Working Example


plnkr


Suggestions


1. Your hrefs should not have #/

<a href="createChallenge">Create</a> |
<a href="findChallenge">Find</a>

2. Otherwise doesn't need redirectTo

.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html'
    })
    .when('/createChallenge', {
      templateUrl: 'create.php',
      controller: 'CreateChallengeController'
    })
    .when('/findChallenge', {
      templateUrl: 'find.php',
      controller: 'FindChallengeController'
    })
    .otherwise("/");

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

3. Extra comma after last .when()

You have:

    .when('/findchallenge', {
        templateUrl: 'raceApp/findChallenge_view.php',
        //controller: 'findChallenge'
    })

The controller is commented out but there is still a comma.

4. You might need to configure html5

(see script.js in the plnkr)

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

5. You can add the base href like so

<script type="text/javascript">
  angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>


Relevant Resources


I suggest checking these out:



Let me know if that works!

5
  • I'd also suggest checking out ui-router instead of $routeProvider - github.com/angular-ui/ui-router
    – sbolel
    Mar 1, 2015 at 2:04
  • Here is a relevant question to check out as well about HTML5 mode: stackoverflow.com/questions/28787645/…
    – sbolel
    Mar 1, 2015 at 2:08
  • That's an amazing answer. I will try to put all the parts together when I find some time, and I'll let you know if it works
    – Matt Pi
    Mar 3, 2015 at 19:16
  • @user3177506 it's bad SO etiquette not to mark answers as accepted when they solve your problem.
    – Alex
    Feb 28, 2016 at 7:54
  • 1
    I can't believe I've never marked the answer. It's exactly what I needed at that time. Thanks! However since then I've moved to ui-router which I advise for people who still work with angularjs
    – Matt Pi
    Aug 8, 2016 at 16:06

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.