Angular route link does not work on bootstrap

Asked

Viewed 1,057 times

5

Person I’m having problem in the menu. The links made in Bootstrap are not bringing my angular routes. If I put the command in the navigation bar goes well. I’ve researched several things and nothing works. If someone went up help me please. Personal thank you!

follows code.

<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>

angularjs bootstrap-3 menu angular-routes

2 answers

0

  • To work the way you are implementing now just replace the ng-href for href.

        <li><a href="#/principal">Início</a></li>
    <li><a href="#/comandos">Comandos</a></li>
    <li><a href="#/downloads">Downloads</a></li>
    <li><a href="#/eventos">Eventos</a></li>
    <li><a href="#/cash">Doações</a></li>

To work with ng-href you need to have a variable loaded in the $scope, Ex:

Controller

       $scope.meuLink = '/cash';

View

      <a ng-href="#/{{meuLink}}"/>Ir ao faz me rir</a>

0

Try something like this on the links:

<a ng-class="isActive('#seuLink')" href="#seuLink">Link</a>

Don’t put the bar first, even if your.js app has the bar there.

Example:

In your app.js you have the following code

.when('/sobre',{
    templateUrl: "templates/sobre.html",
})

On the link would look like this:

<a ng-class="isActive('#sobre')" href="#sobre">Sobre</a>

Browser other questions tagged angularjs bootstrap-3 menu angular-routes

You are not signed in. Login or sign up in order to post.