Failed to instantiate module minovateApp
I am getting this error while building the angular project. I have installed ng-resource to my project:
Uncaught Error: [$injector:modulerr] Failed to instantiate module minovateApp due to:
Error: [$injector:nomod] Module 'minovateApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=minovateApp at file:///E:/InnovationBeesprojects/cargobees-
.....
This is my index.html code
<!doctype html>
<html ng-app="minovateApp" ng-controller="MainCtrl" class="no-js {{containerClass}}">
<head>
<meta charset="utf-8">
<title>Cargobees - Admin Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="icon" type="image/ico" href="favicon.ico" />
<link rel="manifest" href="manifest.json">
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-bootstrap-colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-nav-tree/dist/abn_tree.css" />
<link rel="stylesheet" href="bower_components/chosen/chosen.min.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="bower_components/intro.js/introjs.css" />
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/rickshaw/rickshaw.min.css" />
<link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/fullcalendar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.css" />
<link rel="stylesheet" href="bower_components/morrisjs/morris.css" />
<link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" />
<link rel="stylesheet" href="bower_components/ngImgCrop/compile/minified/ng-img-crop.css" />
<link rel="stylesheet" href="bower_components/simple-line-icons/css/simple-line-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.min.css" />
<link rel="stylesheet" href="bower_components/dragular/dist/dragular.min.css" />
<link rel="stylesheet" href="bower_components/magnific-popup/dist/magnific-popup.css" />
<link rel="stylesheet" href="bower_components/angucomplete-alt/angucomplete-alt.css" />
<link rel="stylesheet" href="bower_components/json-formatter/dist/json-formatter.css" />
<link rel="stylesheet" href="bower_components/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="bower_components/c3/c3.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" />
<link rel="stylesheet" href="bower_components/angular-hovercard/dist/angular-hovercard.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.carousel.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/layout.css">
<!-- endbuild -->
</head>
<body id="minovate" class="{{main.settings.navbarHeaderColor}} {{main.settings.activeColor}} {{containerClass}} header-fixed aside-fixed rightbar-hidden appWrapper" ng-class="{'header-fixed': main.settings.headerFixed, 'header-static': !main.settings.headerFixed, 'aside-fixed': main.settings.asideFixed, 'aside-static': !main.settings.asideFixed, 'rightbar-show': main.settings.rightbarShow, 'rightbar-hidden': !main.settings.rightbarShow}">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Application content -->
<div id="wrap" ui-view autoscroll="false"></div>
<!-- Page Loader -->
<div id="pageloader" page-loader></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyD3ElSyvFYfVVXQlNimsfi_d7edi_VN_V8",
authDomain: "cargo-ee422.firebaseapp.com",
databaseURL: "https://cargo-ee422.firebaseio.com",
storageBucket: "cargo-ee422.appspot.com",
messagingSenderId: "100271283421"
};
firebase.initializeApp(config);
</script>
<script src="googlescripts/service-worker.js"></script>
<script src='//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places,drawing&sensor=false&language=en&v=3.17'></script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap-nav-tree/dist/abn_tree_directive.js"></script>
<script src="bower_components/chosen/chosen.jquery.min.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colreorder/angular-datatables.colreorder.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colvis/angular-datatables.colvis.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/scroller/angular-datatables.scroller.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.min.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<script src="bower_components/angular-fontawesome/dist/angular-fontawesome.js"></script>
<script src="bower_components/angular-fullscreen/src/angular-fullscreen.js"></script>
<script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
<script src="bower_components/intro.js/intro.js"></script>
<script src="bower_components/angular-intro.js/src/angular-intro.js"></script>
<script src="bower_components/angular-ipsum/dist/ipsum.min.js"></script>
<script src="bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>
<script src="bower_components/ev-emitter/ev-emitter.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-momentjs/angular-momentjs.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-smart-table/dist/smart-table.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/fullcalendar/fullcalendar.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-base64/angular-base64.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script>
<script src="bower_components/html.sortable/dist/html.sortable.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>
<script src="bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/jquery.sparkline/index.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/leaflet-draw/dist/leaflet.draw.js"></script>
<script src="bower_components/leaflet-heat/dist/leaflet-heat.js"></script>
<script src="bower_components/leaflet-plugins/control/Distance.js"></script>
<script src="bower_components/leaflet-plugins/control/Layers.Load.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Layer.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Line.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Marker.js"></script>
<script src="bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
<script src="bower_components/leaflet-plugins/layer/Layer.Deferred.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Rotate.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Text.js"></script>
<script src="bower_components/leaflet-plugins/layer/OpenStreetBugs.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.Speed.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/KML.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/OSM.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Bing.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Google.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Yandex.js"></script>
<script src="bower_components/eve-raphael/eve.js"></script>
<script src="bower_components/raphael/raphael.js"></script>
<script src="bower_components/mocha/mocha.js"></script>
<script src="bower_components/morrisjs/morris.js"></script>
<script src="bower_components/ng-bs-daterangepicker/src/ng-bs-daterangepicker.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/ngImgCrop/compile/minified/ng-img-crop.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<script src="bower_components/textAngular/dist/textAngular-rangy.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-sanitize.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular.min.js"></script>
<script src="bower_components/dragular/dist/dragular.min.js"></script>
<script src="bower_components/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="bower_components/flow.js/dist/flow.js"></script>
<script src="bower_components/ng-flow/dist/ng-flow.js"></script>
<script src="bower_components/angular-base64-upload/src/angular-base64-upload.js"></script>
<script src="bower_components/angucomplete-alt/angucomplete-alt.js"></script>
<script src="bower_components/json-formatter/dist/json-formatter.js"></script>
<script src="bower_components/myforce-angularjs-dropdown-multiselect/dist/angularjs-dropdown-multiselect.min.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
<script src="bower_components/angular-date-time-input/src/dateTimeInput.js"></script>
<script src="bower_components/angular-hovercard/dist/angular-hovercard.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<script src="bower_components/angular-websocket/dist/angular-websocket.js"></script>
<script src="bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
</body>
</html>
This is my app.js
var app = angular
.module('minovateApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMessages',
'picardy.fontawesome',
'ui.bootstrap',
'ui.router',
'ui.utils',
'angular-loading-bar',
'angular-momentjs',
'FBAngular',
'lazyModel',
'toastr',
'angularBootstrapNavTree',
'oc.lazyLoad',
'ui.select',
'ui.tree',
'textAngular',
'colorpicker.module',
'angularFileUpload',
'ngImgCrop',
'datatables',
'datatables.bootstrap',
'datatables.colreorder',
'datatables.colvis',
'datatables.tabletools',
'datatables.scroller',
'datatables.columnfilter',
'ui.grid',
'ui.grid.resizeColumns',
'ui.grid.edit',
'ui.grid.moveColumns',
'ngTable',
'smart-table',
'angular-flot',
'angular-rickshaw',
'easypiechart',
'uiGmapgoogle-maps',
'ui.calendar',
'ngTagsInput',
'pascalprecht.translate',
'ngMaterial',
'localytics.directives',
'leaflet-directive',
'wu.masonry',
'ipsum',
'angular-intro',
'dragularModule',
'base64',
'flow',
'naif.base64',
'rorymadden.date-dropdowns',
'angucomplete-alt',
'jsonFormatter',
'angularjs-dropdown-multiselect',
'ui.grid',
'ui.grid.selection',
'angularChart',
'ui.bootstrap.datetimepicker',
'ui.dateTimeInput',
'yaru22.hovercard',
'daterangepicker',
'ngWebSocket'
]);
I'm getting this error:
I'm not sure what I have wrong in my index.html. I am currently developing an app on ionic1 and this error is generated when I try to inspect my code by safari. I have read that this error occurs when a label is not closed, but in my case I do not know what I have wrong. What can be?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json" />
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<!-- css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet" type="text/css"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="lib/waves/css/waves.css" />
<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.css" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngStorage/js/ngStorage.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constantes.js"></script>
<!-- libs -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/swiper/js/swiper.js"></script>
<script src="lib/prefixfree/js/prefixfree.min.js"></script>
<!--<script src='lib/ng-cordova-oauth.min.js'></script>-->
<!--<script src="http://maps.google.com/maps/api/js?key=AIzaSyANNBvPehUvWndNs7zmVqWa7ys1DBTQnDs"></script>-->
<!-- Controladores TinApp -->
<script src="js/controllers/login/loginController.js"></script>
<!--<script src="js/controllers/wizard/ubicacionTinController.js"></script>-->
<script src="js/controllers/wizard/instructivoTinController.js"></script>
<script src="js/controllers/wizard/recuperarContrasenaController.js"></script>
<script src="js/controllers/registros/registrarUsuariosController.js"></script>
<script src="js/controllers/ofertas/ofertasController.js"></script>
<script src="js/controllers/ofertas/descripcionOfertaController.js"></script>
<script src="js/controllers/negocios/negocioController.js"></script>
<!--<script src="js/controllers/negocios/productosController.js"></script>
<script src="js/controllers/negocios/descripcionProductoController.js"></script>
<script src="js/controllers/favoritos/favoritosController.js"></script>
<script src="js/controllers/favoritos/descripcionFavoritoController.js"></script>-->
<script src="js/controllers/cupones/cuponesController.js"></script>
<script src="js/controllers/cupones/misCuponesController.js"></script>
<!--<script src="js/controllers/tins/misTinsController.js"></script>-->
<!--<script src="js/controllers/ajustes/ajustesController.js"></script>-->
<script src="js/controllers/ubicaciones/ubicacionesController.js"></script>
</head>
<body ng-app="tinApp">
<ion-nav-view class="viewport_inicial"></ion-nav-view>
</body>
</html>
As stated in the HTML specification:
The title element must not be empty.
Just add a title:
<title>tinApp</title>
I'm not sure my load order is correct. Can someone make sure it is?
In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/bootstrap.js"</script>
<script src="js/jquery-3.2.1.min.js"</script>
<script src="js/jquery-slim.min.js"</script>
<script src="js/popper.min.js"</script>
<script src="js/custom.js"></script>
In "head" :
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
In "body" :
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.min.js"></script>
Try using the minified version they are much smaller therfore much faster to load
Check this out !
In head :
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
<!-- CUSTOME STYLE CSS-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
In Body :
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
I just follow froala documentation and mix it with current layout using metronic.
Here is my css order.
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/components-md.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/plugins-md.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/themes/grey.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_style.min.css" />
and here is my JS order
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/coeg-editor/js/froala_editor.min.js"></script>
<script>
$(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
$('a[href="{{ Request::url() }}"]').parent().addClass('active');
$('textarea#content').editable({inlineMode: false});
});
</script>
and I get Uncaught TypeError: undefined is not a function right at the $('textarea#content').editable({inlineMode: false});
But there is no error if I comment $('textarea#content').editable({inlineMode: false}); section.
How I can fix it ?
See https://www.froala.com/wysiwyg-editor/v2.0/docs/migrate-from-v1 for using
froalaEditor()
instead of
editable()
never mind the html which contain example still using v1 syntax instead of v2 :D
I just grabbed the example code at http://silviomoreto.github.io/bootstrap-select/ to try it out on my page. I don't know why I can't get the bootstrap-select to work. There are no options/no dropdown list of options (see image). What am I missing here? There are a ton of .css and js files (uses bootstrap 3.x) on the site I'm working on, but I created a template page just so I could try this out. Would someone help me with this? I've read posts here on SO, but I'm not finding the answer I need. Thanks.
Here is the order of the .css files in the <head>:
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-overrides.css" />
<link rel="stylesheet" type="text/css" href="css/lib/bootstrap-select.css" />
<link rel="stylesheet" type="text/css" href="css/lib/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/lib/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/layout.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/elements.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/icons.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" href="css/kendo/kendo.common-bootstrap.min.css"/>
<link rel="stylesheet" href="css/kendo/kendo.bootstrap.min.css"/>
<link rel="icon" type="image/png" href="img/fav.png" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<select class="selectpicker" data-live-search="true" title="Choose a topping.">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Here is the scripts order:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/store.js/store.min.js"></script>
<script src="js/app.js"></script>
<script src="js/data.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/kendo/kendo.all.min.js"></script>
<script src="js/kendo/kendo.angular.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/theme.js"></script>
<!--jquery: -->
$(document).ready(function() {
$('.selectpicker').selectpicker();
});