I want to download admin template and want to convert it into Angular JS.
But when I have converted then side bar menu not open when mouse click and also jquery function hide/show and other function is not working.
I have tried many times , But failed.
Need solution...
HTML Side Menu Sample::
<html lang="en">
<head>
<title>Matrix Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-style.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-media.css" />
<script src="http://html.sujeetkumarsingh.com/html/js/jquery.min.js"></script>
<script src="js/matrix1.js"></script>
</head>
<body>
<!--sidebar-menu-->
<div id="sidebar">
<ul>
<li class="submenu"> <a href="#">class="icon icon-th-list" href="form-common.html"> <span>Addons</span> <span class="label label-important">5</span></a>
<ul>
<li><a href="index2.html">Dashboard2</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat option</a></li>
</ul>
</li>
<li class="submenu"> <a href="#">^__i class="icon icon-info-sign"> <span>Error</span> <span class="label label-important">4</span></a>
<ul>
<li><a href="error403.html">Error 403</a></li>
<li><a href="error404.html">Error 404</a></li>
<li><a href="error405.html">Error 405</a></li>
<li><a href="error500.html">Error 500</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
matrix1.js File::
$(document).ready(function(){
$('.submenu > a').click(function(e)
{
e.preventDefault();
var submenu = $(this).siblings('ul');
var li = $(this).parents('li');
var submenus = $('#sidebar li.submenu ul');
var submenus_parents = $('#sidebar li.submenu');
if(li.hasClass('open'))
{
if(($(window).width() > 768) || ($(window).width() < 479)) {
submenu.slideUp();
} else {
submenu.fadeOut(250);
}
li.removeClass('open');
} else
{
if(($(window).width() > 768) || ($(window).width() < 479)) {
submenus.slideUp();
submenu.slideDown();
} else {
submenus.fadeOut(250);
submenu.fadeIn(250);
}
submenus_parents.removeClass('open');
li.addClass('open');
}
});
var ul = $('#sidebar > ul');
$('#sidebar > a').click(function(e)
{
e.preventDefault();
var sidebar = $('#sidebar');
if(sidebar.hasClass('open'))
{
sidebar.removeClass('open');
ul.slideUp(250);
} else
{
sidebar.addClass('open');
ul.slideDown(250);
}
});
});
Below all code for angular related.
<pre><html lang="en" ng-app="myApp">
<head>
<title>Matrix Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-style.css" />
<link rel="stylesheet" href="http://html.sujeetkumarsingh.com/html/css/matrix-media.css" />
<script src="http://html.sujeetkumarsingh.com/js/jquery.min.js"></script>
<script src="http://html.sujeetkumarsingh.com/js/angular.min.js"></script>
<script src="http://html.sujeetkumarsingh.com/js/angular-route.js"></script>
<script src="js/matrix1.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-include="'header.html'"></div>
<div ng-view></div>
</body>
</html>
app.js File ::
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/chart", {
templateUrl: "chart.html"
})
.when("/table", {
templateUrl: "table.html"
})
.when("/chat", {
templateUrl: "chat.html"
});
});
header.html:::
<div id="sidebar">
<ul>
<li><a href="#!/chart">class="icon icon-signal" href="#!/chat"__^<span>Widgets</span></a> </li>
<li><a href="#!/table">^__i class="icon icon-th"__^</i__^<span>Tables</span></a></li>
<li class="submenu"><a href="#">^__i class="icon icon-th-list"__^<span>Forms</span> <span class="label label-important">3</span></a>
<ul>
<li><a href="form-common.html">Basic Form</a></li>
<li><a href="form-validation.html">Form with Validation</a></li>
<li><a href="form-wizard.html">Form with Wizard</a></li>
</ul>
</li>
<li class="submenu"><a href="#">^__i class="icon icon-file"__^<span>Addons</span> <span class="label label-important">5</span></a>
<ul>
<li><a href="index2.html">Dashboard2</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat option</a></li>
</ul>
</li>
<li class="submenu"><a href="#">^__i class="icon icon-info-sign"__^<span>Error</span> <span class="label label-important">4</span></a>
<ul>
<li><a href="error403.html">Error 403</a></li>
<li><a href="error404.html">Error 404</a></li>
<li><a href="error405.html">Error 405</a></li>
<li><a href="error500.html">Error 500</a></li>
</ul>
</li>
</ul>
</div>
^__b__^chart.html
<div id="content">
<div id="content-header">
<div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home">^__i class="icon-home"__^ Home</a> <a href="#">Sample pages</a> <a href="#" class="current">Chat option</a> </div>
<h1>Chat option</h1>
</div>
</div>
^__b>chat.html
<div id="content">
<div id="content-header">
<div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home">^__i class="icon-home"> Home</a> <a href="#">Sample pages</a> <a href="#" class="current">Chat option</a> </div>
<h1>Chat option</h1>
</div>
</div>
^__b>table.html
<div id="content">
<div id="content-header">
<div id="breadcrumb"> <a href="#" class="tip-bottom" data-original-title="Go to Home">^__i class="icon-home"> Home</a> <a href="#" class="current">Tables</a> </div>
<h1>Tables</h1>
</div>
</div>
My question is that drop-down menu is working in html sample and not working in angular sample. While route is working is angular sample.
What I have tried:
My question is that drop-down menu is working in html sample and not working in angular sample. While route is working is angular sample.
Submit an article or tip