angularjs에서 라우팅 할 때 CSS가 다른보기에로드되지 않습니다.

안녕하세요. 그래서 routeProvider 및 ng-view를 사용하여 Angularjs의보기간에 라우팅합니다. 내 문제는 경로가 변경되면 내 CSS가로드되지 않는다는 것입니다. CSS를 각보기에 포함시킬 수 있도록 Angular-css를 포함 시키려고했지만 작동하지 않는 것 같습니다. ng-view (home.html)에서로드 된 첫 번째 페이지에로드되지만 다른 페이지로 링크하면 CSS로드가 중지됩니다.angularjs에서 라우팅 할 때 CSS가 다른보기에로드되지 않습니다.

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>

이

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을 app.js : 변화하는

<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']);

당신이 http://door3.github.io/angular-css

은 또한 당신의 CSS 경로를 확인하는이 프로젝트 및 버전 1.0.7

를 사용하고 그냥 경우

var myApp = angular.module('myApp', ['ngRoute', 'door3.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 파일의 경로를 확인하십시오. 동일한보기의 폴더 –

그냥 경로를 두 번 확인했는데 루트 폴더와보기 폴더 바깥에 있습니다. 프로젝트 경로를 복사 할 때 styles.css 만 사용합니다. –

기본적으로 $ routeProvider 및 $ locationProvider는 URL "hashbang mode"에서 '#'을 찾습니다.

예를 들어 http://example.com/#/home은 원래 설정으로 home에 templateURL을 사용합니다. 당신이 해시를 사용하지 않으려면

, 당신은 같은 브라우저 URL을 사용하게됩니다 아래 조그만 예를 true.The에 $ locationProvider.html5Mode을 설정 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

angularjs에서 라우팅 할 때 CSS가 다른보기에로드되지 않습니다.

답변

관련 문제