Question

我正在构建基于angular-js的单页解决方案。我认为我的深层链接正在工作，前进和后退浏览器历史记录工作正常。但是，如果我刷新（F5）单个记录页面... bootstrap和angular似乎没有加载，页面显示不正确。所以我希望/所有者提供一个列表和/所有者/ XYZ来提供XYZ单一所有者记录。

我收到的错误表明Chrome没有将其解释为html - 在第一个css链接上失败...但它是深层链接 - 当使用浏览器历史记录确定时。当我刷新时，我得到错误 - ＆gt;＆gt; 资源解释为样式表，但使用MIME类型text / html传输：“http://myfakedomain.com/owners/css/bootstrap.css”。

好的代码 - 在这里我连接了routeProvider：

.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix("!");
$routeProvider
    .when('/owners', {templateUrl: '/partials/owner-list.html',  controller:OwnerListCtrl})
    .when('/owners/:name', {templateUrl: '/partials/owner-details.html',   controller:OwnerCtrl})
     .when('/', {templateUrl:'/partials/home.html', controller:HomeCtrl})
    .otherwise({redirectTo:'/home'});
}]);

此处相关的2个简单控制器...后端是用于从RESTful Web服务检索的工厂服务。

function OwnerListCtrl($scope, $routeParams, backend) {
var ug = $( "#ug" ).html();
var mydata = null;

// load the params coming from the UI
if (($routeParams != null)&& ($routeParams.nm != null))
    mydata = $routeParams.nm;
else{
    // in case we get here directly - ensure only super users
    // will access other owner entities
    if (ug != SUPERUSER)
        mydata = $( "#on" ).html();     
}
backend.owners(mydata).then(function (result){
        $scope.owners = result.data.data;
});
$scope.orderProp = 'name';
}

单记录控制器......

function OwnerCtrl($scope, $routeParams, $http, backend,$log, $location){
    // populate the companys select dropdown
    $scope.companys=function(){
        backend.companys().then(function (response){
            $scope.companies = response.data.data;
        })
    }
    if (($routeParams == null) && ($routeParams.name == null)){
        var ug = $( "#ug" ).html();
        var myParam = null;

        if (ug != SUPERUSER)
            myParam = $( "#on" ).html();

        backend.owners(myParam).then(function (result){
            $scope.owner = result.data.data[0];
            $scope.companys();
        });
    }else{
        backend.owners($routeParams.name).then(function (result){
            $scope.owner = result.data.data[0];
            $scope.companys();
            $log.info($location.url());
        });     
    }

}

任何见解都会受到欢迎。

Answer 1

我认为这是一个路由问题。如果您查看css文件的路径，它试图从myfakedomain.com/owners/css/bootstrap.css加载，我假设它应该是myfakedomain.com/css/bootstrap.css。路径是否在您的html文件中相对定义？

Answer 2

我认为您需要为链接文件，js和css使用绝对路径。您需要在根目录中设置一个.htaccess文件，该文件会重写对index.html的所有请求，假设这是您的角度应用程序。以下是建议的解决方案：

# if a directory or a file exists, use it directly
#RewriteCond %{REQUEST_FILENAME} -s [OR]
#RewriteCond %{REQUEST_FILENAME} -l [OR]
#RewriteCond %{REQUEST_FILENAME} -d
#RewriteCond %{REQUEST_URI} !/api
#RewriteRule ^.*$ - [NC,L]

# otherwise forward it to index.html
#RewriteRule ^app/(.*) /app/#/$1 [NC,L]

但是，简化版本适用于我，我的应用程序子目录位于根文件夹中，而不是示例中的app文件夹。这适用于我的案例

RewriteEngine on
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]

希望这有帮助。

Angular JS深层链接和浏览器刷新

2 个答案: