In index.html
<html lang="en" ng-app="hrApp">
<head>
<link rel="stylesheet">
...
</head>
<body>
<!-- templating -->
<!-- this is where content will be injected -->
<div ui-view></div>
<script>
...
<body>
</html>
In app.js
var hrApp = angular.module('hrApp', ['ui.router']);
hrApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login')
$stateProvider
.state('#', {
url: '',
templateUrl: 'views/login-portion.component.html',
controller: 'loginPageController'
})
.state('user-page', {
url: '/user-page',
templateUrl: 'views/user-main-page.component.html',
controller: 'userPageController'
})
});
In login-portion.component.html, the text field click animation relies on assets/pages/element.js, which isn't working. [problem A].
In login-portion.component.html
<div class="md-input-wrapper">
<input type="text" class="md-form-control" ng-model="loginInputEmail" placeholder="username" required autofocus/>
</div>
In element.js
"use strict";
$(document).ready(function(){
$(".md-form-control").each(function() {
console.log("in main function");
$(this).parent().append('<span class="md-line"></span>');
});
$(".md-form-control").change(function() {
if ($(this).val() == "") {
console.log("in if");
$(this).removeClass("md-valid");
} else {
console.log("in else");
$(this).addClass("md-valid");
}
});
});
In user-main-page.component.html the Sidebar toggle button won't toggle the sidebar, which is dependent on code from assets/js/main.js [problem B].
In user-main-page.component.html
<div class="wrapper">
<!-- Pre-Loader-->
<div id="pre-loader"></div>
<!-- Header Top Menu-->
<header class="main-header-top hidden-print">
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a ui-sref="user-page" data-toggle="offcanvas" class="sidebar-toggle"></a>
....
<!-- Side-Nav-->
<aside class="main-sidebar hidden-print " >
<section class="sidebar" id="sidebar-scroll">
<div class="user-panel">
...
In assets/js/main.js
// side button js code start
$.pushMenu = {
activate: function (toggleBtn) {
//Enable sidebar toggle
$(toggleBtn).on('click', function (e) {
console.log("toggle pressed");
e.preventDefault();
//Enable sidebar push menu
if ($(window).width() > (767)) {
if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
} else {
$("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
}
}
//Handle sidebar push menu for small screens
else {
if ($("body").hasClass('sidebar-open')) {
$("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
} else {
$("body").addClass('sidebar-open').trigger('expanded.pushMenu');
}
}
if ( $('body').hasClass('fixed') && $('body').hasClass('sidebar-mini') && $('body').hasClass('sidebar-collapse')) {
$('.sidebar').css("overflow","visible");
$('.main-sidebar').find(".slimScrollDiv").css("overflow","visible");
}
if ($('body').hasClass('only-sidebar')) {
$('.sidebar').css("overflow","visible");
$('.main-sidebar').find(".slimScrollDiv").css("overflow","visible");
};
});
$(".content-wrapper").on('click',function () {
//Enable hide menu when clicking on the content-wrapper on small screens
if ($(window).width() <= (767) && $("body").hasClass("sidebar-open")) {
$("body").removeClass('sidebar-open');
}
});
}
};
