Angular routing issue when accessing url based on id

Question

My end goal is to allow users to access products when clicking on the item itself. So for each product item rendered in main.html the url is something like...

<a href="/products/{{ product.id }}">{{ product.title }}</a>

for example: right now when inside localhost:8000/products/4/ the itemDetails.html page shows but with a ton of 404 errors and

Error: $injector:nomod Module Unavailable Module 'productFind' is not available

my items.route.js looks like this:

(function () {
  'use strict';

  angular
    .module('items')
    .config(routerConfig);

  function routerConfig($stateProvider) {
    $stateProvider
      .state('itemDetails', {
        url: '/products/:id',
        templateUrl: 'items/itemDetails.html',
        controller: 'ItemDetailsController',
        controllerAs: 'itemDetails'
      })
  }

})();

and my index.html renders

<div ng-view></div>

the index.module.js

import { config } from './index.config';
import { routerConfig } from './index.route';
import { runBlock } from './index.run';
import { MainController } from './main/main.controller';
import '../app/components/items/items.module.js';
import { ItemDetailsController } from '../app/components/items/items.controller';
import { GithubContributorService } from '../app/components/githubContributor/githubContributor.service';
import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service';
import { NavbarDirective } from '../app/components/navbar/navbar.directive';
import { MalarkeyDirective } from '../app/components/malarkey/malarkey.directive';

angular.module('productFind', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngRoute', 'toastr', 'items'])
  .constant('malarkey', malarkey)
  .constant('moment', moment)
  .config(config)
  .config(routerConfig)
  .run(runBlock)
  .service('githubContributor', GithubContributorService)
  .service('webDevTec', WebDevTecService)
  .controller('MainController', MainController)
  .controller('ItemDetailsController', ItemDetailsController)
  .directive('acmeNavbar', NavbarDirective)
  .directive('acmeMalarkey', MalarkeyDirective);

My file structure looks like so...

productFind
    ...
    src
         app
              components
                   items
                        itemDetails.html
                        items.controller.js
                        items.module.js
                        items.route.js
                        itemsDataService.js
              main
                   main.controller.js
                   main.html
              index.module.js
              index.route.js

I'm assuming this is a routing issue so my question is: what am I doing wrong to be receiving this error message when I try to access the item/product details : localhost:8000/products/4/?

This is probably not your problem but you should use ng-href instead of href. — AJ Richardson
– AJ Richardson, Commented Mar 12, 2016 at 2:23
@Modelesq No problem. I'm not too familiar with that error, but try checking the $injector:nomod documentation if you haven't already. — AJ Richardson
– AJ Richardson, Commented Mar 12, 2016 at 2:34

Lansana Camara · Accepted Answer · 2016-03-12 02:56:27Z

4

You are using ngRoute and ng-view with with $stateProvider.. $stateProvider is from UI-Router. Get UI-Router and use ui.router and ui-view instead. This alone should fix your problem.

UI-Router can be found here.

answered Mar 12, 2016 at 2:56

Lansana Camara

9,90112 gold badges54 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gary Over a year ago

Yes, nice catch here

Modelesq Over a year ago

Similarly could I just keep ngRoute and ng-view with $routeProvider?

Lansana Camara Over a year ago

Yes but there may be breaking changes..you should change all $state.go(...) statements and so forth. That being said, ui-router is a much better option.

Modelesq Over a year ago

Yes, this would fix it. I think I need to stick with $routeProvider and ng-view.

Modelesq Over a year ago

@Lansana yep, i'll be reverting to $routeProvider. Lol I'm sure it will cause issues.

|

Collectives™ on Stack Overflow

Angular routing issue when accessing url based on id

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related