Angular UI Router - Partial GETs 404 Not Found

Question

I'm currently working on a project using Material Design Lite and Angular JS. I'm having a problem setting up a simple route with angular UI router.

Here are links in the index's navbar.

 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="/home" class="mdl-layout__tab is-active">Dashboard</a>
      <a href="/schedule" class="mdl-layout__tab">Schedule</a>
      <a href="/assignments" class="mdl-layout__tab">Assignments</a>
    </div>

Please note that I cannot add # before the / in the href because MDL will not recognize it as a valid selector. I have tried making normal links and they will still not route.

Here is the app config for ui-route.

app.config(function($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise('home');



        $stateProvider
        .state('home', {
            url: '/home',
            templateUrl : 'views/dashboard.html'

        })
        .state('assignments', {
            url: '/assignments',
            templateUrl : 'views/assignments.html'
        });

    });

And here is the structure of my project.

[app]
[js]
[views
--dashboard.html
--assignments.html]
app.js

The home state (dashboard.html) loads up inside ng-view in the index file, but I cannot get assignments to appear when clicking the link. This is what gets displayed inside my http-server console.

[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.101 Safari/537.36"
[Tue Mar 14 2017 12:04:30 GMT-0500 (CDT)] "GET /assignments" Error (404): "Not found"

Thank you for your help!

Wes · Accepted Answer · 2017-03-14T18:05:05.630

0

If you are using a nodejs server to serve up the pages, are you using html5Mode(true) in your application? Otherwise, you'd need to add the hash to your anchor tag.

i.e.

<a href="#/assignments">Assignments</a>

Also since you are using ui-router you can use the ui-sref attribute to navigate directly to the state name.

i.e.

<a ui-sref="assignments">Assignments</a>

edited Mar 14 '17 at 18:05

answered Mar 14 '17 at 17:59

Wes

172
11

this guy is a champ. injected locationProvider into the config, used $locationProvider.html5Mode(true); and then added a inside the header. everything works perfectly now. more information about html5mode here: http://stackoverflow.com/questions/18214835/angularjs-how-to-enable-locationprovider-html5mode-with-deeplinking – Ginger G Mar 14 '17 at 18:15

Angular UI Router - Partial GETs 404 Not Found

1 Answers1