Person I'm having trouble on the menu. The links made in Bootstrap are not bringing my angular routes. If I put the command in the navigation bar is going well. I already researched several things and nothing works. If someone came up, please help me. Thanks guys!
code follows.
<head>
<meta charset="UTF-8">
<title>TonaCraft</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="estilo.css">
<link href='https://fonts.googleapis.com/css?family=Crete+Round:400,400italic' rel='stylesheet' type='text/css'>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="app/modulos/app.js"></script>
<script src="app/controller/controle.js"></script>
</head>
<body lang="pt-br" ng-app="app">
<!-- Topo Header -->
<div class="row fundoGrdadiente">
<div class="col-md-12">
<div class="imgTopoEsqDir noneMobile"><img src="imagens/logoMenu.png" width="100%"> </img></div>
<div class="imgTopoCentro"><img src="imagens/logo2.png" width="90%" ></img></div>
<div class="imgTopoEsqDir"><img src="imagens/contatoMail.png" width="100%"
onclick="window.open('contato/contato.php' , 'new' , 'toolbar=yes, scrollbars=yes,
resizable=no, top=100, left=500, width=500, height=700')";> </img>
</div>
</div>
</div>
<!-- MENU -->
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barraMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-sm hidden-md hidden-lg"><a class="navbar-brand" ng-href="#/principal">TonaCraft</a></div>
</div>
<div class="collapse navbar-collapse rolling-nav" id="barraMenu" >
<ul class="nav navbar-nav menu">
<li><a ng-href="#/principal">Início</a></li>
<li><a ng-href="#/comandos">Comandos</a></li>
<li><a ng-href="#/downloads">Downloads</a></li>
<li><a ng-href="#/eventos">Eventos</a></li>
<li><a ng-href="#/cash">Doações</a></li>
</ul>
</div>
</div>
</div>
<a ng-href="#/principal">principal</a>
<a ng-href="#/comandos">comandos</a>
<a ng-href="#/downloads">downloads</a>
<a ng-href="#/eventos">eventos</a>
<a ng-href="#/cash">cash</a>
<!-- View Angular -->
<ng-view> </ng-view>
<!--Footer -->
<div class="row">
<div class="col-md-12" ng-include src="'inc/rodape.inc'"> </div>
</div>
<script src="jquery.min.js"></script>
<script text="javascript" src="myJs.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
MODULE:
// Carregando o modulo ngRoute
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider, $locationProvider)
{
/* // remove o # da url
$locationProvider.html5Mode(true);*/
// para a rota '/principal', carregaremos o template principal.html e o controller 'PrincipalCtrl'
$routeProvider.when('/principal', {
templateUrl : 'app/views/principal.html',
controller : 'PrincipalCtrl',
})
// para a rota '/comandos', carregaremos o template comandos.html e o controller 'ComandosCtrl'
$routeProvider.when('/comandos', {
templateUrl : 'app/views/comandos.html',
controller : 'ComandosCtrl',
})
// para a rota '/downloads', carregaremos o template downloads.html e o controller 'DownloadsCtrl'
$routeProvider.when('/downloads', {
templateUrl : 'app/views/downloads.html',
controller : 'DownloadsCtrl',
})
// para a rota '/eventos', carregaremos o template eventos.html e o controller 'EventosCtrl'
$routeProvider.when('/eventos', {
templateUrl : 'app/views/eventos.html',
controller : 'EventosCtrl',
})
// para a rota '/cash', carregaremos o template cash.html e o controller 'CashCtrl'
$routeProvider.when('/cash', {
templateUrl : 'app/views/cash.html',
controller : 'CashCtrl',
})
/* // caso não seja nenhum desses, redirecione para a rota '/'
$routeProvider.otherwise ({ redirectTo: '/principal' });*/
});
CONTROL
app.controller('PrincipalCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('ComandosCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('DownloadsCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('EventosCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('CashCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
AN EXAMPLE VIEW
<style>
.altura300{height:300px;}
.altura200{height:200px;}
.backColorPanel{
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 3%, rgba(28,28,28,0.65) 43%, rgba(68,68,68,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 3%,rgba(28,28,28,0.65) 43%,rgba(68,68,68,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 3%,rgba(28,28,28,0.65) 43%,rgba(68,68,68,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00444444',GradientType=0 ); }
.backColorHeadPanel{ background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 95%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 95%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );}
</style>
</head>
<div class="container">
<div class="row">
<div class="panel panel-default backColorPanel">
<div class="panel-heading backColorHeadPanel">
<h1 class="panel-title text-center">Download do Jogo</h1>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default altura300 backColorBodyPanel">
img download
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default altura300 backColorBodyPanel">
descrição jogo
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default backColorPanel">
<div class="panel-heading">
<h1 class="panel-title text-center">Dicas de Texture</h1>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default altura200 backColorBodyPanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default altura200 backColorBodyPanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default altura200 backColorBodyPanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default altura200 backColorBodyPanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>