javascript - 根据id访问url时Angular路由问题

Question

我的最终目标是允许用户在单击产品本身时访问产品。因此，对于 main.html 中呈现的每个产品项，其 url 类似于...

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

例如:现在，当 内部 localhost:8000/products/4/ 时，itemDetails.html 页面显示，但有大量 404 错误和

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

我的items.route.js看起来像这样:

(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'
      })
  }

})();

和我的index.html渲染

<div ng-view></div>

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);

我的文件结构看起来像这样...

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

我假设这是一个路由问题，所以我的问题是:当我尝试访问项目/产品详细信息:localhost:8000/products/4/时收到此错误消息，我做错了什么？

Answer 1

您正在将 ngRoute 和 ng-view 与 $stateProvider 一起使用。$stateProvider 来自 UI -路由器。获取 UI-Router 并使用 ui.router 和 ui-view 代替。仅此一项就可以解决您的问题。

UI-Router 可以找到 here .