Noobish Noobish - 1 year ago 69
AngularJS Question

Angular loading css files taking time and throw error in console

I am using Angular-seed starter project and I wanted to load CSS files according to the language selected by user. I have 2 files for each css file. I have a

to load everything for English and
to load rtl version.

To solve this problem. I added a controller in the HTML so that I can control the user selected language and change file names. Here is the code:


<!DOCTYPE html>
<html ng-app="myApp" dir="{{dir}}" ng-controller="HeadController">
<meta charset="utf-8">
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Angular seed</title>

<!-- For browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" href="css/{{rtl}}bootstrap.css">

<!-- custom style -->
<link rel="stylesheet" href="css/{{rtl}}style.css">


<ul class="menu">
<li><a href="/view1">view1</a></li>
<li><a href="/view2">view2</a></li>

<div ng-view></div>

<script src=""></script>

<!-- In production use:
<script src="//"></script>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-css/angular-css.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>

<script src="dist/bootstrap/js/bootstrap.min.js"></script>



'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {

$routeProvider.otherwise({redirectTo: '/view1'});

controller('HeadController', function($scope) {
$scope.rtl = 'rtl-';
$scope.dir = 'rtl';

Everything works fine and
is being loaded but it is taking time. Because as soon as I logon to
, it tries to load the css files and then angular is being loaded so it throws an error in the console:

GET http://localhost:8000/dist/bootstrap/css/%7B%7Brtl%7D%7Dbootstrap.css
localhost/:23 Not Found
GET http://localhost:8000/dist/css/%7B%7Brtl%7D%7Dstyle.css Not Found

Answer Source

The angular braces are included in the url thats the reason for %7b in the url, use the ngHref directive