The preloader I implemented into my website is loading indefinitely. It keeps loading and never goes to the homepage of the website and I'm not really sure what the issue is as the problem started without me seemingly changing anything.
The HTML Code for the preloader:
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,900" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/maincontact.css">
</head>
<body>
<!-- Start Preloader Area -->
<div class="preloader-area">
<div class="loader-box">
<div class="loader"></div>
</div>
</div>
<!-- End Preloader Area -->
Javascript:
//------- Pre Loader --------//
$(window).on('load', function () {
$(".preloader-area").delay(200).fadeOut(500);
})
That's the only code that's been touched at all between now and when the preloader started loading indefinitely. I would appreciate any suggestions.
Related
i am using laravel and vuejs to develop single page application in my index.blade.php i am invoke app element vuejs
this is my index.blade.php
#extends('layout.header')
<div id="app" v-cloak v-on:shownav="shownavO()">
<nav_bar v-if="hide" :authType="authType" ></nav_bar>
<menuuu v-if="hide" :authType="authType" ></menuuu>
<router-view class="v-cloak--hidden"></router-view>
</div>
#extends('layout.footer')
<script src="{{asset('js/app.js')}}"></script>
in my layout.header it is a blade file i include css file
<!DOCTYPE html>
<html class="loading" lang="{{$lang}}" data-textdirection="{{$lang=='ar'?'rtl':'ltr'}}" id="app">
<!-- BEGIN: Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>munasbaty</title>
<link rel="apple-touch-icon" href="{{url('/')}}/app-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="{{url('/')}}/app-assets/images/ico/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<!-- BEGIN: Vendor CSS-->
#if(!isset($lang)||$lang=='en')
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/shepherd-theme-default.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/colors.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/semi-dark-layout.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/dashboard-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/plugins/tour/tour.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/css/style.css">
#endif
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body>
when update the page or when open the project the application It appears this way in the beginning
I need to load set of js in header. Below is my header element:
<head><script type="text/javascript" src="https://saswdswddx.cloudfront.net/ClientLibs.js"/>
</head>
which ultimately generates below head section:
<head>
<script src="https://xxxxfffdfdfdfd.cloudfront.net/89cc9bacc8f01db1.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/211850746383fd35.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/b30b4a28e94073b3.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/bc0c3159d13ffdaf.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/080d763d10e18196.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/84df93ace8f5ef4d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/e7b23f7c66091e21.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/1d4c3d5cded23cb2.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/6f8353875d2eab13.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/22635695f659cee6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/f645699f959874ea.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/52bf1c32f66e3366.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/7c14d48ac546cfab.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/3c2c0190729a5de6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/905fab7bd45ffd32.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/aa6c83d100400291.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/1583adf5ca69f94b.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/7351efd5ad3a8219.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d2a3be708cf0ecb2.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/09511a5f22cca316.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/51a8a84831926cab.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/cebd04bf55acaf98.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8f7a98b8524699fa.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/c765ce94b008b43a.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d411591679fc777a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/fd4e563878f699ca.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/a7aa4ab396dc2c06.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/74bfd02e310d0c96.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/777512d78b46f09a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/9a00d70cd5a8f544.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/05da1be4803bfe93.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/da39a3ee5e6b4b0d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/3d3ff45927792b85.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/34f252296c86892b.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/6598462041ef9c9f.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/da39a3ee5e6b4b0d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/4fb6b6291f77a814.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/e555a7200b70dcee.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/0fd5ba39ae8af05a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/e64a562a726c1b03.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/296c14c415f75a7a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/fe68b7820bc0cf4f.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d836af899190a3f7.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/05e03b1ae258b4cd.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/82de18bac08fa17f.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/46f426bcfc9dd89c.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/2046534748dde247.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6e94559c187d5d00.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/74531b771786a1fd.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/39ffcb4194a365fc.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/1b05d38fb2515b7c.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/2e91a32ab37b51d5.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/4dc09203c5082946.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/8ac01bbb7f05e0a9.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/ed192084e9139b54.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/ab612c7a907116a6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8deedebe93f06b91.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6012e3e21c48364e.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8486fc770633b5d7.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/27525a908ad9afa6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/e1c04b332299c91a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6048e657d7aa5b54.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/685b3fc65211ee22.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/7ec73ef718990b40.min.css">
</head>
Also, in my body section the spa starts with init() method, which contains variable and component which are available is above js files in head section.
Now unless and until all my js files will get load, my application wont render.
So everytime i am getting error, undefined variable.
I want init mehod in body must call only after all js files in head section get loaded.
Depending on what browsers you're targetting, you can or can not use the async keyword.
The solution I personally use in production is to move all the script tags to the bottom of the <body> element, and order them in the order of dependency.
So you move the script from the CDN to the bottom of the <body> tag,
and you put the script with the init() method after it.
Example:
I have two scripts. script1 depends on script2, so it needs to be loaded after it.
Here's what I'd do:
<!doctype html>
<html>
<head></head>
<body>
Some HTML here...
<script src="script2.js"></script>
<script src="script1.js></script>
</body>
</html>
Alternatively you could manually load the scripts in whatever order you want using AJAX, but that would be needlessly complicated.
It's entirely possible I'm doing something stupid ...
Full stack trace of the Error
Error: [ng:btstrpd] App Already Bootstrapped with this Element < html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths ng-scope mdl-js js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache
This Error is occuring in my index.html file.by default i route to login.html.it goes on continous loop.so many ng-view are getting created.
this is my script.js and index.html
// create the module and name it app
var app = angular.module('app', ['ngRoute','luegg.directives']);
// configure our routes
app.factory("Data", function(){
var pagesData = {};
var loginData = {};
var data = {};
// var setPageName = function(x){
// pagesData.pageName = x;
// console.log(x);
// };
//
// var setPageId = function(x){
// pagesData.pageId = x;
// console.log(x);
// };
// var getPageData = function(){
// return pagesData;
// };
// return {pageData : pagesData.pageName};
return {
getpageData : function () {
console.log(pagesData);
return pagesData;
},
setPageName : function (name) {
pagesData.pageName = name;
console.log("1111111111111");
console.log(pagesData);
},
setPageId : function (id) {
pagesData.pageId = id;
console.log("1111111111111");
console.log(pagesData);
},
setUserName : function (name) {
loginData.userName = name;
console.log("1111111111111");
console.log(pagesData);
},
setUserEmail : function (mail) {
loginData.userEmail = mail;
console.log("1111111111111");
console.log(pagesData);
},
getLoginData : function () {
console.log(pagesData);
return loginData;
}
}
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login-2.html',
controller : 'loginCtrl'
})
.when('/page', {
templateUrl : 'pages.html',
controller : 'myPagesCtrl'
})
.when('/try', {
templateUrl : 'try.html',
controller : 'myctrl'
});
});
app.controller('myPagesCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('myctrl', function($scope) {
$scope.message = 'Look! I am an about page.';
});
app.controller('mainController', function($scope,$location) {
scope.message = 'Look! I am an about page.';
});
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title> Monarch UI - Bootstrap Frontend & Admin Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-blue.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/images/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/images/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/images/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../assets/images/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../assets/images/icons/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/bootstrap/css/bootstrap.css">
<!-- HELPERS -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/animate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/backgrounds.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/boilerplate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/border-radius.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/grid.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/page-transitions.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/spacing.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/typography.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/utils.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/colors.css">
<!-- ELEMENTS -->
<link rel="stylesheet" type="text/css" href="../../assets/elements/badges.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/buttons.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/content-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/dashboard-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/forms.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/images.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/info-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/invoice.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/loading-indicators.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/menus.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/panel-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/response-messages.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/responsive-tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/ribbon.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/social-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tile-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/timeline.css">
<!-- ICONS -->
<link rel="stylesheet" type="text/css" href="../../assets/icons/fontawesome/fontawesome.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/linecons/linecons.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/spinnericon/spinnericon.css">
<!-- WIDGETS -->
<link rel="stylesheet" type="text/css" href="../../assets/widgets/accordion-ui/accordion.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/calendar/calendar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/carousel/carousel.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/justgage/justgage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/morris/morris.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/piegage/piegage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/xcharts/xcharts.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/chosen/chosen.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/colorpicker/colorpicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datatable/datatable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker-ui/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dialog/dialog.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropdown/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropzone/dropzone.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/file-input/fileinput.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch-alt.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/ionrangeslider/ionrangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jcrop/jcrop.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jgrowl-notifications/jgrowl.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/loading-bar/loadingbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/maps/vector-maps/vectormaps.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/markdown/markdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/modal/modal.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-select/multiselect.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-upload/fileupload.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/nestable/nestable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/noty-notifications/noty.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/popover/popover.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/pretty-photo/prettyphoto.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/progressbar/progressbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/range-slider/rangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slidebars/slidebars.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slider-ui/slider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/summernote-wysiwyg/summernote-wysiwyg.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tabs-ui/tabs.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/theme-switcher/themeswitcher.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/timepicker/timepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tocify/tocify.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tooltip/tooltip.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/touchspin/touchspin.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/uniform/uniform.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/wizard/wizard.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/xeditable/xeditable.css">
<!-- SNIPPETS -->
<link rel="stylesheet" type="text/css" href="../../assets/snippets/chat.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/files-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/login-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/notification-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/progress-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/todo.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/user-profile.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/mobile-navigation.css">
<!-- APPLICATIONS -->
<link rel="stylesheet" type="text/css" href="../../assets/applications/mailbox.css">
<!-- Admin theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/layout.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/color-schemes/default.css">
<!-- Components theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/default.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/border-radius.css">
<!-- Admin responsive -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/responsive-elements.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/admin-responsive.css">
<!-- JS Core -->
<script type="text/javascript" src="../../assets/js-core/jquery-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-widget.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-mouse.js"></script>
<script type="text/javascript" src="../../assets/widgets/interactions-ui/sortable.js"></script>
<script type="text/javascript" src="../../assets/jquery.ns-autogrow/dist/jquery.ns-autogrow.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-position.js"></script>
<!--<script type="text/javascript" src="../../assets/js-core/transition.js"></script>-->
<script type="text/javascript" src="../../assets/js-core/modernizr.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-cookie.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="../../assets/angular/app.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/angular/page-animations.css">
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/myPagesController.js"></script>
<script type="text/javascript" src="scripts/about.js"></script>
<script type="text/javascript" src="scripts/loginController.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
<script type="text/javascript" src="scripts/chosen-sort.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-2.4.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen-demo.js"></script>
<script type="text/javascript" src="../../assets/widgets/accordion-ui/accordion.js"></script>
<script type="text/javascript" src="../../assets/angularjs-scroll-glue/src/scrollglue.js"></script>
<script type="text/javascript" src="../../assets/angular-xeditable/js/xeditable.js"></script>
<script type="text/javascript" src="../../assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard-demo.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/dropzone/dropzone.js"></script>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/tabs/tabs.js"></script>
<script type="text/javascript" src="../../assets/widgets/parsley/parsley.js"></script>
</head>
<body>
<div ng-view>
</div>
<!-- <button><i class="fa fa-home"></i> Home</button>
<i class="fa fa-shield"></i> About -->
</body>
</html>
Your issue is this:
.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
})
You don't need to specify 'index.html' here. index.html will be loaded by your server. You need to pass what template file to load into the ng-view that is in that index.html when the '/' path is detected.
edit: As mentioned in my comments. You also should only have 1 ng-app directive in your application. This directive bootstraps angular and is only needed once.
I have the following files
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
That was working fine but when I added other JS files like DateTimepicker then my autocomplete function stops working.
<script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
<link href="css/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
Error:
Uncaught TypeError: $(...).autocomplete is not a function
The issue is because you're including two versions of jQuery. The first one has jQueryUI methods added to it. The second one then overwrites the first. Remove the last jQuery script include.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- REMOVE THIS >> <script src="js/jquery.js" type="text/javascript"></script> -->
<script src="js/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
seems like you have added jQuery library twice.
keep it only once.
Either this one <script src="//code.jquery.com/jquery-1.10.2.js"></script> or <script src="js/jquery.js" type="text/javascript"></script>
I have style chooser on my site. I can choose whatever style/color skin, using the gear located on the right-side. I am trying to figure out, How can I override the default style?
You can switch the CSS that is loaded by default quite easily. Do the following...
Open your index.html and on line #91 you will find the list of all the style sheets as shown below.
<link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
The default style that is loaded is the first one at the top of the list, in this case it is red.css. So if you want to change the color for example lets say you want BLUE to be your default color scheme, you need to move <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" /> to the top on line #91 or above the red.css to make it your default. You will need to make this change to all of your pages html files i.e about.html, contact.html, and so on.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.