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

Question

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

我收到的错误表明 Chrome 没有将其解释为 html - 第一个 css 链接失败...但它是深层链接 - 使用浏览器历史记录时正常。当我刷新时，出现错误 ->> 资源解释为样式表，但使用 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 个与此处相关的简单 Controller ...后端是用于从 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';
}

还有单个记录 Controller ...

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

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