CSS not loaded in other views when routing in angularjs

Question

Hey so I'm routing between views in Angularjs using routeProvider and ng-view. My issue is that my css does not get loaded when the route changes. I tried including Angular-css so that the css could be included in each view but it doesn't seem to work. It gets loaded in the first page loaded from ng-view (home.html), but when I link to another page from there the css stops getting loaded.

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>

    <script src="app/lib/jquery-3.0.0.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css" />

    <script src="app/lib/angular.min.js"></script>
    <script src="app/lib/angular-route.min.js"></script>
    <script src="app/lib/angular-css.min.js"></script>
    <script src="app/lib/app.js"></script>
  </head>
  <body>

    <main ng-view>
    </main>

  </body>

app.js

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
  .when('/login', {
    templateUrl: 'views/login.html',
    css: 'styles.css'
  })
  .when('/home', {
    templateUrl: 'views/home.html',
    css: 'styles.css'
  })
  .when('/signup', {
    templateUrl: 'views/signup.html',
    css: 'styles.css'
  })
  .when('/submitdish', {
    templateUrl: 'views/submitdish.html',
    css: 'styles.css'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    css: 'styles.css'
  })
  .otherwise({
    redirectTo: '/home',
    css: 'styles.css'
  });
}]);

home.html:

<ul class="nav">
     <a align="center" href="views/home.html"><li>Home</li></a>
     <a align="center" href=""><li>About</li></a>
     <a align="center" href="#"><li>Contact</li></a>
  </ul>

<section class="container">
  <div class="left-half">
    <article>
      <a href="views/submitdish.html" class="Button">Sell a Dish</a>

      <p>Something Something Something about Selling your home-cooked dishes</p>
    </article>
  </div>
  <div class="right-half">
    <article>
      <a href="views/buydish.html" class="Button">Buy a Dish</a>
      <p>Yada yada yada buy food from your neighbors</p>
    </article>
  </div>
</section>

Can you recreate this issue and post it into a fiddle?

Cosmin Ababei
– Cosmin Ababei

2016-06-28 16:35:15 +00:00
Commented Jun 28, 2016 at 16:35 — Cosmin Ababei
– Cosmin Ababei, Commented Jun 28, 2016 at 16:35

Manuel Espino · Accepted Answer · 2016-06-28 17:00:05Z

1

Try to change in your injection

What you have

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

To

var myApp = angular.module('myApp', ['ngRoute', 'door3.css']);

Just if you are using this project and version 1.0.7

http://door3.github.io/angular-css

Also verify your CSS paths, you have to be explicit even if your .html and css are in the same folder

    var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

    myApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
      .when('/login', {
        templateUrl: 'views/login.html',
        css: 'views/styles.css'
      }); 
}]);

Or if is in a different folder

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

        myApp.config(['$routeProvider', function($routeProvider){

        $routeProvider
          .when('/login', {
            templateUrl: 'views/login.html',
            css: 'Content/styles.css'
          }); 
    }]);

edited Jun 28, 2016 at 17:00

answered Jun 28, 2016 at 16:43

Manuel Espino

2733 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paul Bridi Over a year ago

hmm this didn't seem to work... in the description of that project it mentions to add 'angularCSS' as the dependency: github.com/castillo-io/angular-css

Manuel Espino Over a year ago

@PaulBridi Check the path of the css files, even if the css is in the same folder of your view

Paul Bridi Over a year ago

Ok just double checked the path, it is directly in the root folder and outside the views folder. When I copy the project path it is just styles.css.

Paul Bridi Over a year ago

No I don't think so

Manuel Espino Over a year ago

What if you try to move the css file into a folder? then update the paths

Paul Bridi · Accepted Answer · 2016-06-28 17:24:27Z

1

Ok I figured it out the problem was I was linking to the other views using

<a href="views/submitdish.html" class="Button">Sell a Dish</a>

when I should have been linking using #/submitdish (so as to properly use the routeProvider)

<a href="#/submitdish" class="Button">Sell a Dish</a>

answered Jun 28, 2016 at 17:24

Paul Bridi

991 silver badge6 bronze badges

1 Comment

Rahal Danthanarayana Over a year ago

Good Description is available in the answer below

n daniel · Accepted Answer · 2016-06-28 18:02:54Z

1

By default, $routeProvider and $locationProvider look for '#' in the URL--"hashbang mode".

For example, http://example.com/#/home would use the templateURL for home, with your original settings.

If you don't want to use the hash, set $locationProvider.html5Mode to true.The teeny example below will let you use browser URLs like http://www.example.com/base/path

Configuration:

$routeProvider
  .when('/path', {
   templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(true);

HTML (note the base href in the head)

<html>
  <head>
    <base href="/">
  </head>
  <body>
    <a href="/path">link</a> 
  </body>
</html>

answered Jun 28, 2016 at 18:02

n daniel

1481 silver badge10 bronze badges

Collectives™ on Stack Overflow

CSS not loaded in other views when routing in angularjs

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related