CSS не загружен в другие представления при маршрутизации в angularjs

Эй, я прохожу между видами в Angularjs, используя routeProvider и ng-view. Моя проблема в том, что мой css не загружается при изменении маршрута. Я попытался включить Angular-css, чтобы css мог быть включен в каждую точку зрения, но он, похоже, не работает. Он загружается на первую страницу, загруженную из ng-view (home.html), но когда я связываюсь с другой страницей, css перестает загружаться.CSS не загружен в другие представления при маршрутизации в angularjs

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>

источник

2016-06-28 Paul Bridi

Можете ли вы воссоздать эту проблему и опубликовать ее в скрипке? –

Хорошо, я понял это проблема была я связь с другими видами использования

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

, когда я должен были связаны с использованием #/submitdish (чтобы правильно использовать routeProvider)

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

источник

2016-06-28 17:24:27

Хорошее описание доступно в ответе ниже –

Попробуйте изменить в инъекции

Что вы имеете

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

Для

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

Просто, если вы используете этот проект и версию 1.0.7

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

также проверить ваши пути CSS, вы должны быть явным, даже если ваши .html и css находятся в одном и том же Папка

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

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

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

Или, если находится в другой папке

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

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

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

источник

2016-06-28 16:43:14

Хм, похоже, это не работало ...в описании этого проекта он упоминает о добавлении «angularCSS» в качестве зависимости: https://github.com/castillo-io/angular-css –

@PaulBridi Проверьте путь к файлам css, даже если css находится в одна и та же папка вашего вида –

Ок, просто дважды проверили путь, он находится непосредственно в корневой папке и вне папки представлений. Когда я копирую путь проекта, это просто styles.css. –

По умолчанию $ routeProvider и $ locationProvider ищут «#» в URL-адресе - «режим hashbang».

Например, http://example.com/#/home будет использовать шаблонURL для дома, с исходными настройками.

Если вы не хотите использовать хэш, установить $ locationProvider.html5Mode на true.The подростка ниже пример позволит вам использовать URL-адреса браузера, как http://www.example.com/base/path

Конфигурация:

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

HTML (обратите внимание на основание href в голове)

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

источник

2016-06-28 18:02:54

CSS не загружен в другие представления при маршрутизации в angularjs

ответ

Смежные вопросы