CSS nicht geladen in anderen Ansichten beim Routing in angularjs

Hey, ich bin Routing zwischen Ansichten in Angularjs mit routeProvider und ng-view. Mein Problem ist, dass mein CSS nicht geladen wird, wenn sich die Route ändert. Ich habe versucht Angular-CSS zu verwenden, so dass das CSS in jeder Ansicht enthalten sein kann, aber es scheint nicht zu funktionieren. Es wird auf der ersten Seite geladen, die von ng-view (home.html) geladen wird, aber wenn ich von dort auf eine andere Seite verlinke, wird die CSS nicht mehr geladen.CSS nicht geladen in anderen Ansichten beim Routing in 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>

Quelle

2016-06-28 Paul Bridi

Können Sie dieses Problem neu erstellen und es in eine Geige posten? –

Ok ich es herausgefunden das Problem war ich zu den anderen Ansichten wurde die Verknüpfung mit

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

wenn ich soll wurden mit #/submitdish verknüpft (um den routeProvider korrekt zu verwenden)

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

Quelle

2016-06-28 17:24:27

Gute Beschreibung ist in der Antwort unten verfügbar –

versuchen zu ändern, um Ihre

Injektion

Was haben Sie

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

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

dir vor, wenn Sie dieses Projekt und Version verwenden 1.0.7

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

auch Ihre CSS-Pfade überprüfen, Sie müssen explizit sein, auch wenn Ihre .html und CSS sind in der gleichen Ordner

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

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

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

Oder wenn in einem anderen Ordner

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

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

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

Quelle

2016-06-28 16:43:14

hmm das schien nicht zu funktionieren ...In der Beschreibung dieses Projekts heißt es, 'angleCSS' als Abhängigkeit hinzuzufügen: https://github.com/castillo-io/angular-css –

@PaulBridi Prüfe den Pfad der CSS-Dateien, auch wenn die CSS in der der gleiche Ordner deiner Ansicht –

Ok einfach überprüft den Pfad, es ist direkt im Stammordner und außerhalb der Ansichten Ordner. Wenn ich den Projektpfad kopiere, ist es nur styles.css. –

Standardmäßig suchen $ routeProvider und $ locationProvider im URL - "hashbang mode" nach '#'.

Zum Beispiel würde http://example.com/#/home die VorlageURL für zu Hause mit Ihren ursprünglichen Einstellungen verwenden.

Wenn Sie den Hash nicht verwenden möchten, stellen Sie locationProvider.html5Mode $ unten Teeny Beispiel true.The werden Sie sich wie

Konfiguration http://www.example.com/base/path verwenden Browser-URLs lassen:

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

HTML (notieren Sie die Basis href im Kopf)

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

Quelle

2016-06-28 18:02:54

CSS nicht geladen in anderen Ansichten beim Routing in angularjs

Antwort

Verwandte Themen