I'm using Angular UI-ROUTER but it does not load the styles of the table in one of the sections (In that section I am using Bootstrap Table )
index.html
<!DOCTYPE hmtl>
<html>
<head>
<meta charset="utf-8">
<title>My App 2</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-table/dist/bootstrap-table.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bower_components/bootstrap-table/dist/locale/bootstrap-table-es-CL.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="calculaApp">
<a ui-sref="inicio" ui-sref-active="active">Inicio</a>
<a ui-sref="donar" ui-sref-active="active">Donar</a>
<a ui-sref="insumos" ui-sref-active="active">Insumos</a>
<ui-view></ui-view>
</body>
</html>app.js
var myApp = angular.module ('calculaApp', ['ui.router']);
myApp.config(function($stateProvider){
var inicioState = {
name: 'inicio',
url: '',
templateUrl: 'templates/inicio.html'
}
var donarState = {
name: 'donar',
url: '/donar',
templateUrl: 'templates/donar.html'
}
var insumosState = {
name: 'insumos',
url: '/insumos',
templateUrl: 'templates/insumos.html'
}
$stateProvider.state(inicioState);
$stateProvider.state(donarState);
$stateProvider.state(insumosState);
});insumos.html
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>