2

我正在构建一个基于 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 个与此处相关的简单控制器......后端是一个工厂服务，用于从 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());
        });     
    }

}

任何见解都会受到欢迎。

4

2 回答 2

2

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

于 2013-04-03T20:32:20.280 回答
0

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

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

希望这可以帮助。

于 2013-05-01T12:05:38.057 回答