angularjs - وضع html5 مع نخر خدمة لا تعمل




gruntjs (2)

حاول إضافة هذا في وحدة تطبيق الجذر في كتلة التكوين. تأكد من تضمين / حقن $ لوكاتيونبروفيدر.

$locationProvider
  .html5Mode({
    enabled: true,
    requireBase: false
  })
  .hashPrefix('!');

في ملف النخر، كتلة ليفيرلواد يشبه هذا:

livereload: {
  options: {
    open: true,
    middleware: function(connect, options, middleware) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
      return [
        [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
          optBase.map(function(path) {
            return connect.static(path);
          })),
        connect.static('.tmp'),
        connect().use(
          '/bower_components',
          connect.static('./bower_components')
        ),
        connect().use(
          '/app/styles',
          connect.static('./app/styles')
        ),
        connect.static(appConfig.app)
      ];
    }
  }
},

مضيفا:

 [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
                    optBase.map(function(path){ return connect.static(path); })),

لم تستخدم للعمل بالنسبة لي لتمكين وضع HTML5، وإلا، طرقي لا تحميل دون #! عندما أحاول إعادة تحميل عبر المتصفح.

لدي قاعدة هريف = '/' المضافة و html5Mode (ترو) في التكوين. هل هناك أي شيء آخر يمكنني تجربته؟ لماذا تتوقف حقا عن العمل؟

ملاحظة: تبين أن عنوان ورل يحتوي على نقطة فيه ولا يتم التعامل معه بواسطة قاعدة إعادة الاتصال كوبي-مود بشكل جيد. أي فكرة عن كيفية تغيير ذلك وتمكينه من التعامل مع نقطة في ورل؟


وأعتقد أن مشكلة نقطة هو تأثير جانبي للمشكلة العامة. لديك نفس الإعداد، أكثر أو أقل. أنا ببساطة إعادة تعيين html5Mode في .config() مثل هذا:

if (window.location.host == 'localhost:9000') {
   $locationProvider.html5Mode(false);
   $locationProvider.hashPrefix('');
} else {
   $locationProvider.html5Mode(true);
}

فإن التطبيق لا يزال بادئة جميع عناوين المواقع مع #/ في وضع التنمية، مما يجعل عناوين المواقع، وربط ليفيرلواد ألم. حل هذا عن طريق توجيه صغير أن يتغير منتظم /urls ل /#/urls :

var isLocalHost = (location.hostname === "localhost" || location.hostname === "127.0.0.1");
angular.module('myApp').directive('debugLink', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {         
        var href = element.attr('href');
        if (href && isLocalHost && href.charAt(0) == '/') {
          element.attr('href', '#'+href);
        }
      }, 100);
    }
  }
});

الآن يمكن الربط بواسطة <a href="/url" debug-link>link</a>

وأخيرا، استخدم إعادة التوجيه .htaccess من https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode على خادم الإنتاج

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

أنا استخدم هذا النهج في عدة أنغولارجس + مشاريع النخر. أنه يمنع ليفيرلواد من كسر، أي عندما أصاب كترل - S يتم تحديث الصفحة، ويمكنني استخدام عناوين المواقع الصحيحة في أي مكان. أعتقد لا أحد مهتم في وجود البادئات أو التجزئة في وضع الإنتاج.





gruntjs