Question

我需要一个角度应用程序，它可以在将网站移动到任何子文件夹后工作。

的index.html

＆＃13;

<!DOCTYPE html>
<head>
    
    <link rel="icon" href="images/favicon.png"/>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-css-only/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="fonts/pictonic/css/pictonic.css">
    <link rel="stylesheet" href="fonts/webapp/css/Webapp-font.css">

    <script>
    document.write('<base href="' + document.location + '" />');
    </script>
    
</head>
<body>
    <div ui-view></div>
    
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>    
    <script src="app.js"></script>
    <script src="mainView/mainview.js"></script>
    <script src="components/version/version.js"></script>
    <script src="components/version/version-directive.js"></script>
    <script src="components/version/interpolate-filter.js"></script>
    
</body>
</html>

＆＃13;

州提供者

＆＃13;

$stateProvider
   	.state('home', {
   		url: "/",
   		templateUrl: 'partials/home.html'
   	})
   	.state('parent', {
   		abstract: true,
   		url: "/parent",
   		templateUrl: 'partials/parent.html'
   	})
   		.state('parent.child1', {
              templateUrl: "partials/parent.child1.html",
              url: "/child1"
          })
   		.state('parent.child2', {
              templateUrl: "partials/parent.child2.html",
              url: "/child2"
          })

   	.state('etc', {
   		url: "/etc",
   		templateUrl: 'partials/etc.html'
   	})

＆＃13;

Apache重写配置得很好。如果我去了＆＃39;等等。状态和刷新一切正常。但是子状态刷新会产生错误。浏览器尝试下载例如来自www.mysite.com/parent/app.js的app.js文件，该文件保留在此处：www.mysite.com/app.js

我该如何解决这个问题？

Answer 1

不是100％肯定，但我会调查你设置基本标签的方式。如果您将基准设置为当前位置，那么..src="app.js"...实际上应考虑您的位置。当然，这仅在页面加载时设置一次。

Answer 2

将此脚本放在index.html中。向rUrl写下您的父状态网址，与＆＃34; |＆＃34;分开。所有的css和js文件都将添加addTag（），因此请将您的源文件放在那里。

Apache / nginx需要重写！

＆＃13;

<script type="text/javascript">
    (function() {
      var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1],
          rUrl = /(#!\/|settings|index[^\.]*\.html).*$/,
          baseUrl = location.href.replace(rUrl, indexFile),
          headEl = document.getElementsByTagName('head')[0],
          sync = true;

      addTag('base', {href: baseUrl});

      addTag('link', {rel: 'icon', href: 'images/favicon.png', type: 'text/css'});
      addTag('link', {rel: 'stylesheet', href: 'css/bootstrap.min.css', type: 'text/css'});
      addTag('link', {rel: 'stylesheet', href: 'css/app.css', type: 'text/css'});

      addTag('script', {src: 'js/jquery.min.js' }, sync);
      addTag('script', {src: 'js/angular.min.js' }, sync);     
      addTag('script', {src: 'js/ui-bootstrap-tpls.min.js' }, sync);
      addTag('script', {src: 'js/angular-ui-router.min.js' }, sync);
      addTag('script', {src: 'js/app.js' }, sync);
      
      function addTag(name, attributes, sync) {
        var el = document.createElement(name),
            attrName;

        for (attrName in attributes) {
          el.setAttribute(attrName, attributes[attrName]);
        }

        sync ? document.write(outerHTML(el)) : headEl.appendChild(el);
      }

      function outerHTML(node){
        // if IE, Chrome take the internal method otherwise build one
        return node.outerHTML || (
            function(n){
                var div = document.createElement('div'), h;
                div.appendChild(n);
                h = div.innerHTML;
                div = null;
                return h;
            })(node);
      }
    })();
    
  </script>

＆＃13;

Angular UI Router - 在子状态刷新后，不加载css和js文件

2 个答案: