Question

我有一个小型的AngularJS测试应用程序，正在运行http-server。我正在使用ui-router。当我加载localhost:8080时，我的角度组件工作正常。当我点击<a ui-sref="new">New</>时，我转到localhost:8080/new，新组件加载正常。但是，当我重新加载页面时，product-details组件无法加载

app.js

'use strict';

angular
  .module('productApp', [
    'ui.router',
    'ProductComponents',
  ])
  .config([
    '$httpProvider',
    '$locationProvider',
    '$stateProvider',
    '$urlRouterProvider',
    '$compileProvider',
    function($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider, $compileProvider) {

    $locationProvider.html5Mode(true).hashPrefix('!');
    $compileProvider.debugInfoEnabled('<%= Rails.env.development? %>');

    var token = document.querySelector('meta[name="csrf-token"]');

    if(angular.isElement(token)){
      $httpProvider.defaults.headers.common['X-CSRF-Token'] = token.content;
    }
    $httpProvider.useApplyAsync(true);

    $httpProvider.defaults.paramSerializer = '$httpParamSerializerJQLike';

    // For any unmatched url, redirect to /state1
    $urlRouterProvider
    .otherwise("/");

    $stateProvider
      .state('root', {
        url: "/",
        template: '<product-index meta="meta"></product-index>'
      })
      .state('new', {
        url: "/new",
        template: '<product-new></product-new>'
      })
    }])

的index.html

<!DOCTYPE html>
<html>
<head>>
  <script src="angular.js"></script>
  <script src="angular-resource.js"></script>
  <script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
  <script src="select.js"></script>
  <script src="product_components.js"></script>
  <script src="product_index.js"></script>
  <script src="product_new.js"></script>
  <script src="product_details.js"></script>
  <script src="app.js"></script>
  <base href="/">
</head>

<body>
  <div ng-app="productApp">
    <ui-view></ui-view>
  </div>
</body>
</html>

产品new.js

'use strict';

angular
  .module('ProductComponents')
  .component('productNew', {
    bindings:{

    },
    templateUrl: "new.html",
    controllerAs: 'prodNew',
    controller: function(){
        var prodNew = this;

        prodNew.product = { name: 'Test Product' };
      }
  }
)

new.html

<h2>Products</h2>

<product-details product="prodNew.product"></product-details>

产品details.js

angular
  .module('ProductComponents')
  .component('productDetails', {
    bindings:{
      product: '=product',
    },
    templateUrl: "details.html",
    controllerAs: 'prodDetails',
    controller: [
      '$filter',
      // '$http',
      function(
        $filter,
        // $http,
      ){
        var prodDetails = this;
        ...

angularjs http-server重载状态不起作用

0 个答案: