基于 id 访问 url 时存在角度路由问题

Angular routing issue when accessing url based on id

本文关键字:路由 问题 存在 id 访问 url 基于      更新时间:2023-09-26

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

url类似于...
<a href="/products/{{ product.id }}">{{ product.title }}</a>

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

错误:$injector:nomod 模块不可用 模块"产品查找"不可用

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

和我的索引.html渲染

<div ng-view></div>

索引模块.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

我假设这是一个路由问题,所以我的问题是:当我尝试访问项目/产品详细信息时,我做错了什么来收到此错误消息:本地主机:8000/产品/4/?

您正在使用 ngRouteng-view with with $stateProvider .. $stateProvider来自UI-Router。获取UI路由器并改用ui.routerui-view。仅此一项就可以解决您的问题。

UI-Router可以在这里找到。