Angular UI 路由器 - 子状态刷新后，不加载 css 和 js 文件答案

【问题标题】：Angular UI Router - after child state refreshes, doesn't load css and js filesAngular UI 路由器 - 子状态刷新后，不加载 css 和 js 文件
【发布时间】：2015-09-01 04:36:36
【问题描述】：

我需要一个 Angular 应用程序，该应用程序在将站点移动到任何子文件夹后可以正常工作。

索引.html

<!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>

国家提供者

$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'
   	})

Apache 重写配置良好。如果我进入“等”状态并刷新一切正常。但是子状态刷新会出错。浏览器尝试从 www.mysite.com/parent/app.js 下载 app.js 文件，但该文件停留在此处：www.mysite.com/app.js

我该如何解决这个问题？

【问题讨论】：

标签： javascript html angularjs angular-ui-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

将此脚本放在 index.html 中。在 rUrl 中写入您的父状态 url，用“|”分隔。您的所有 css 和 js 文件都将使用 addTag() 添加，因此请将您的源代码放在那里。

需要 Apache/nginx 重写！

<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>

【讨论】：