基于ID访问URL时出现角路由问题

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/?

Answer 1

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 .