I'm currently doing an AngularJS app. This is a brand new approach for me, but the more I use it, the more I love it ! Angular is a really cool framework !
So, for my first app, I tried to use Foundation 5 with it, to build a Frontend module and a Backend module. I'm using the Foundation's accordion to wrap contents in them both.
<dl class="accordion" data-accordion="">
<dd class="accordion-navigation">
<a class="active" href="#panel1">Foot-Hand-Volley <i class="foundicon-minus right"></i></a>
<div id="panel1" class="content active">
<div class="row">
<div class="large-6 columns">
<ul class="no-bullet">
<li>15 designs</li>
<li>2 produits</li>
<li>2 matières</li>
</ul>
</div>
<div class="large-6 columns">
<ul class="no-bullet">
<li>4 formes</li>
<li>4 numéros et nom</li>
<li>12 logos et sponsors</li>
</ul>
</div>
</div>
<a href="#" class="button">Supprimer le sport</a>
<a href="#" class="button">Editer le sport</a>
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel2">Rugby <i class="foundicon-plus right"></i></a>
<div id="panel2" class="content">
<div class="row">
<div class="large-6 columns">
<ul class="no-bullet">
<li>15 Designs</li>
<li>2 produits</li>
<li>2 matières</li>
</ul>
</div>
<div class="large-6 columns">
<ul class="no-bullet">
<li>4 formes</li>
<li>4 numéros et nom</li>
<li>12 logos et sponsors</li>
</ul>
</div>
</div>
<a href="#" class="button">Supprimer le sport</a>
<a href="#" class="button">Editer le sport</a>
</div>
</dd>
<dd class="accordion-navigation">
<a href="#panel3">Basket <i class="foundicon-plus right"></i></a>
<div id="panel3" class="content">
<div class="row">
<div class="large-6 columns">
<ul class="no-bullet">
<li>15 Designs</li>
<li>2 produits</li>
<li>2 matières</li>
</ul>
</div>
<div class="large-6 columns">
<ul class="no-bullet">
<li>4 formes</li>
<li>4 numéros et nom</li>
<li>12 logos et sponsors</li>
</ul>
</div>
</div>
<a href="#" class="button">Supprimer le sport</a>
<a href="#" class="button">Editer le sport</a>
</div>
</dd>
<dd></dd>
</dl>
On the backend, I need to use routes. And at the right time I use Angular routes, my accordion is trying to add url params such as "#panel1", "#panel2"... when I click on it... And angular doesn't really agree with that... because my routes says :
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'}).
when('/login', {
templateUrl: 'views/login.html',
controller: 'loginCtrl'}).
otherwise({
redirectTo: '/'
});
});
Any idea how to solve it ? Thanks and hope that my bad English will make you guys understand my problem !