Question

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

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

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

错误：$ injector：nomod模块不可用模块＆＃39; productFind＆＃39;不可用

我的 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-Router。获取UI路由器并改为使用ui.router和ui-view。仅这一点就可以解决你的问题。

可以找到UI-Router here。

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

1 个答案: