AngularJS routing views properly but stylesheets broken

Question

I'm building an AngularJS application with routed views and to be clear the routing is working, as in the template pages in my /views/ folder are asynchronously loading into the view div on my index.html page.

The problem: These used to be seperate pages linked together the old fashioned way. Index.html, deal.html, and merchant.html. They all rendered perfectly in all browsers at that point but when I added this AngularJS routes feature, the same code is being dropped into the index.html file but the pages are not rendering properly. A lot of the styles are there... just misaligned. I can't wrap my head around it. I've looked everywhere and nobody seems to have documented this issue.

Here's what I've got so far:

head:

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

The file system:

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>

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

Any ideas on what's going on?

providing a plunker url with your code is always helpful if you want to get faster replies. http://plnkr.co/ — George Katsanos, Sep 20 '14 at 10:21

score 0 · Answer 1 · answered Sep 20 '14 at 10:21

0

If your html is under "views" in the file system, why are you declaring the templateUrl property to be "partials/..." ?

Change

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

to

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

and a piece of advice: drop ngRoute and use ui-router which is become the defacto standard for routing. https://github.com/angular-ui/ui-router

answered Sep 20 '14 at 10:21

George Katsanos

13,524
16
62
98

Thanks for the tip about the ui-router. The views/partials error was just an error here on stackoverflow, it matches up in my code. sorry about that ;x – Sev Gevorkyan Sep 20 '14 at 10:23
like i said in the post, the views are working properly just css isnt displaying correctly. – Sev Gevorkyan Sep 20 '14 at 10:24

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

Perhaps this can help:

How to include view/partial specific styling in AngularJS

and pay attention to the point

2. Specify which stylesheets belong to which routes using the $routeProvider

edited May 23 '17 at 11:49

Community

1
1

answered Sep 20 '14 at 10:35

Andrija Petrovic

211
1
7

I saw this, it looked promising but complicated for my situation. I would have to go through thousands of lines of code and divide the code into chunks to create these partial.css files for each view. I may end up doing this for lack of a better option. thanks – Sev Gevorkyan Sep 20 '14 at 10:43

AngularJS routing views properly but stylesheets broken

2 Answers2