Question

我有一个AngularJS应用程序，当'grunt serve'提供服务时，它在浏览器中运行良好。但是，尝试将该应用作为Chrome扩展程序运行失败。显示初始页面（'/'路线），但当我按下“/＃/ products / add”链接时，我收到“未找到网页”错误。

No webpage was found for the web address: chrome-extension://acekeiblhdhhbgoagmeegclohfncadjg/#/products/add
Error code: ERR_FILE_NOT_FOUND

为什么第一条路线有效，但第二条路线失败？

我的清单目前是裸机，但我尝试了各种权限（但根路由工作的事实让我觉得其他路由应该有用）。

{
  "manifest_version": 2,

  "name": "My app",
  "description": "Does stuff",
  "version": "1.0",

  "permissions": [
    "<all_urls>"
  ],
  "browser_action": {
    "default_icon": "app/images/icon.png",
    "default_popup": "app/index.html"
  }
}

app.js文件如下所示：

'use strict';

angular.module('myApp', [
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngStorage'
])
.config(function ($routeProvider) {
  $routeProvider.
    when('/products', {
      templateUrl: 'views/product_pages/product_list.html',
      controller: 'ProductListCtrl'
    }).
    when('/products/add', {
      templateUrl: 'views/product_pages/product_add.html',
      controller: 'ProductAddCtrl'
    }).
    when('/products/:productId', {
      templateUrl: 'views/product_pages/product_edit.html',
      controller: 'ProductEditCtrl'
    }).
    otherwise({
      redirectTo: '/products'
    });
})
.run(function () {
  // removed for brevity
});

产品添加控制器的内容如下：

.controller('ProductAddCtrl', ['$scope', '$location', 'productPageCollection',
function ($scope, $location, productPageCollection) {

  $scope.showError = function(ngModelController, error) {
    return ngModelController.$error[error];
  };

  $scope.processForm = function() {
    productPageCollection.add({ 'name' : $scope.product.name });
    $location.path('/products');
  };
}])

有什么想法吗？

Answer 1

您的链接应指向#/products/add，而不是/#/products/add。第二个选项尝试导航到您的扩展程序的根文件夹。

AngularJS路由无法在Chrome扩展程序中使用

1 个答案: