Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Brad Woods
Brad Woods
13,772 Points

AngularJS refreshes and links

My AngularJS single page app works fine when I visit /localhost and subsequently when I click on a link it will go to /localhost/news but if I refresh /localhost/news or try to visit the URL /localhost/news it doesn't work.

I have html mode enabled to allow me to have URLs without '#'. I have tried to find solutions for this at stackoverflow and they state you need to modify the server to redirect incoming traffic but their solutions aren't explained very well. I'm using grunt-connect server.

3 Answers

Jarrod Brooks
Jarrod Brooks
5,071 Points
Jarrod Brooks
Jarrod Brooks
5,071 Points

What routing provider are you using? Is it ui-router, ngRoute, or something else?

If you are using grunt connect server, and all of your configurations are correct, check if you are utilizing the keepalive option.

By default, once grunt's tasks have completed, the web server stops. This option changes that behavior.

Personal note: grunt does a lot of great things, its one of my favorite tools. However it doesn't seem like the best tool for running a local server. Granted, I've never tried that approach, so maybe it works great. I just use ISSe, because I'm on windows platform. Have you tried using a proper local server/or an online environment? If so, do you come across the same problem?

In regards to the redirecting and the connection to your specific issue, I don't think that's the answer. Unless you are trying to go to the domain root or you dont have $state configured properly. If you find that to be the issue then you can handle that in app.config and use $routeProvider or $urlRouteProvider to set up redirecting, and $stateProvider to wire up your states.

Sorry for the long answer but without code it's hard to know exactly what's happening.

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

Hey Jarrod,

I started using WAMP as a server. I still have the same issue. Below is routing code - 

app.config(function($routeProvider, $locationProvider){
  $routeProvider
    .when('/news',{
      controller:'NewsCtrl',
      templateUrl:'partials/news.html'})
    .when('/past_events',{
      controller:'PastEventsCtrl',
      templateUrl:'partials/past_events.html'})
    .when('/links',{
      controller:'LinksCtrl',
      templateUrl:'partials/links.html'})
    .when('/about',{
      controller:'AboutCtrl',
      templateUrl:'partials/about.html'})
    .when('/contact',{
      controller:'ContactCtrl',
      templateUrl:'partials/contact.html'})
    .when('/login',{
      controller:'LoginCtrl',
      templateUrl:'partials/login.html'})
    .when('/maint',{
      controller:'MaintCtrl',
      templateUrl:'partials/maint.html'})
    .otherwise({
      redirectTo:'/news'});

  $locationProvider.html5Mode(true);
});

I also set my base element in the header - 

<head>
    <meta charset="utf-8">
    <base href="/">
Jarrod Brooks
Jarrod Brooks
5,071 Points
Jarrod Brooks
Jarrod Brooks
5,071 Points

try this:

//include ngRoute in your dependecies
var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {
//not sure if it matters with ngRoute but try templateUrl then controller
      $routeProvider
        .when('/news', {
          templateUrl:'partials/news.html',
          controller:'NewsCtrl'
      })
        .when('/past_events', {      
          templateUrl:'partials/past_events.html',
          controller:'PastEventsCtrl'
      })
        //other routes here
      .otherwise({ 
        redirectTo:'/news'
      });
  $locationProvider.html5Mode(true);
});

What version of angular are you using? Do you have a base URL configured anywhere? Are you running in the root or a sub directory? That could be causing an impact. Do you have this in your head?

<!-- if you have deployed to the root -->    
<head>
    <base href="/"></base>    
</head>

<!-- if you have deployed to a sub directory -->    
<head>
    <base href="/myapp/"></base>
</head>

I think you should consider ui-router. Not only is it widely accepted as the best routing service for Angular, they specifically built this library for what you are trying to accomplish. A direct quote off of their site:

Most states in your application will probably have a url associated with them. URL Routing was not an afterthought to the state mechanics, but was figured into the design from the beginning (all while keeping states separate from url routing)

They also have an enormous amount of support to real world issues and a large part of the Angular community uses it. Here is an example of that support in reference to the suggestions about server configuration.

example:

$stateProvider
    .state('news', {
        url: '/news',
        templateUrl: 'partials/news.html',
        controller: 'NewsCtrl' 
    })

I hope this helps