正確的AngularJS路由查看，但樣式表破碎

我構建了一個AngularJS應用程序路由視圖，並清除路由工作，因爲在我的/視圖/文件夾中的模板頁面異步加載到我的索引視圖div .html頁面。正確的AngularJS路由查看，但樣式表破碎

問題：這些過去是單獨的頁面鏈接在一起的老式的方式。 Index.html，deal.html和merchant.html。它們在所有瀏覽器中都完美呈現，但是當我添加此AngularJS路由功能時，相同的代碼將被丟棄到index.html文件中，但頁面無法正確呈現。很多風格在那裏......只是沒有對齊。我無法把頭圍住它。我到處尋找，似乎沒有人記錄這個問題。

這裏是我到目前爲止有：

頭：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
<script src="app.js"></script>

文件系統：

index.html 
app.js 
/views/main.html 
/views/merchant.html 
/views/deal.html 
assets/css/ 
img/

米的index.html：

<div id="main"> 

    <div class="ng-view" autoscroll="true"></div> 

</div>

我app.js：

var appName = angular.module('adamApp', ['ngRoute']); 

// configure routes 
appName.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl : 'partials/home.html', 
     controller : 'mainController' 
    }); 
    $routeProvider.when('/merchant', { 
     templateUrl : 'partials/merchant.html', 
     controller : 'merchantController' 
    }); 
    $routeProvider.when('/deal', { 
     templateUrl : 'partials/deal.html', 
     controller : 'dealController' 
    }); 

    $routeProvider.otherwise({ redirectTo: "/" }); 

});

的舊版本網站的截圖無角的路線：

Screenshot of old version of site without Angular routes:

的角路線版本破樣式表截圖：

Screenshot of Angular routes version with broken stylesheet:

上這是怎麼回事任何想法？

來源

2014-09-20 Sev Gevorkyan

路線提供plunker如果您想獲得更快的回覆，使用您的代碼的url總是有幫助的。 http://plnkr.co/ – 2014-09-20 10:21:53

如果你的html在文件系統的「views」下，爲什麼你要聲明templateUrl屬性是「partials/...」？

變化

$routeProvider.when('/deal', { 
     templateUrl : 'partials/deal.html', 
     controller : 'dealController' 
    });

到

$routeProvider.when('/deal', { 
     templateUrl : 'views/deal.html', 
     controller : 'dealController' 
    });

和一個忠告：下降ngRoute和使用UI路由器已經成了路由的事實標準。https://github.com/angular-ui/ui-router

來源

2014-09-20 10:21:02

感謝有關ui路由器的提示。 views/partials錯誤在這裏只是一個錯誤在stackoverflow，它匹配在我的代碼。對不起，x – 2014-09-20 10:23:46

就像我在帖子中說的，視圖正常工作，只是CSS不能正確顯示。 – 2014-09-20 10:24:44

也許這可以幫助：

How to include view/partial specific styling in AngularJS

和注意點

2.指定樣式表屬於哪個使用$ routeProvider

來源

2014-09-20 10:35:02

我看到了這一點，它看起來很有希望，但對我的情況來說很複雜。我將不得不經歷數千行代碼並將代碼分成塊，以便爲每個視圖創建這些partial.css文件。由於缺乏更好的選擇，我最終可能會這樣做。謝謝 – 2014-09-20 10:43:41

正確的AngularJS路由查看，但樣式表破碎

回答

相關問題