I have downloaded the demo for mobileangularui. Upon loading in chrome I get error for loading mobile-angular-ui-hover.min.css, dist/css/mobile-angular-ui-base.min.css, dist/css/mobile-angular-ui-desktop.min.css and mobile-angular-ui.gestures.min.js. Am not able to understand what am I missing.
Here's my code:
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
Related
I follow instruction on https://datatables.net/examples/styling/bootstrap5.html
And I have setup in the style as sequence here
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link href="~/lib/fontawesome/css/all.css" rel="stylesheet" />
<!-- Theme style bootstrap 5.1 -->
<link href="~/css/soccer/soccer.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!--icheck-bootstrap v3.0.1-->
<link href="~/lib/icheck-bootstrap/icheck-bootstrap.css" rel="stylesheet" />
<!-- Custome Site csss Style-->
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/css/layerslider.css" rel="stylesheet" />
<!-- For Custom External Login Button -->
<link href="~/css/externalLogin.css" rel="stylesheet" />
<!-- Theme style admin LTE 3.1 -->
<link href="~/css/adminlte.css" rel="stylesheet" />
<link href="~/css/footballMatch.css" rel="stylesheet" />
And the sequence of the script here
<!-- jQuery 3.6-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 5.1 bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery-->
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/datatables/datatables.js"></script>
<script src="~/lib/datatables/DataTables/js/dataTables.bootstrap5.js"></script>
<!-- AdminLTE App 3.1 -->
<script src="~/js/adminlte.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/tables/table.js" asp-append-version="true"></script>
And in the view
#model IEnumerable
#{
ViewData["Title"] = "ViewAllMatch";
}
<h3>View All Match</h3>
<script>
$(document).ready(function () {
$('#ViewAllMatchTbl').DataTable();
});
</script>
<div class="table table-responsive-sm">
<table id="ViewAllMatchTbl" class="table table-striped table-hover">
//Remove to clear
</table>
</div>
How can I know and debug the right order of style or the script.
Thanks
Try to use the following scripts：
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0-rc/js/adminlte.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
I use the scripts and do not get error:
I know this is going to be a very simple error I am missing.
In my Angularj App, Error: Failed to instantiate module myApp due to: persists on showing. I know this down to the module not being loaded before being called by my own but I have been staring at my code trying to understand why it won't load i.e my own script loading before the module CDNs, spelling mistake etc.
My scripts are loaded like so:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<title>Angular</title>
</head>
And in my app.module.js I try to inject two modules chartjs and uirouter. I switch them about and which ever is first it still flags an error
var app = angular.module('myApp', ['chart.js', 'ui.router']);
Question
Why are the modules failing to load? Sorry for the simple question.
You are missing the reference for angular-chart.js and reorder the references as follows,
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
I am not able to inject froala wysiwyg-editor dependency to my module.
It shows this error:
Failed to instantiate module froala due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.5.6/$injector/nomod?p0=froala
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:235
at b (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:24:282)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:20
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:374
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355
My module in app.js is:
var teacherDashboard = angular.module('teacherDashboard', ['froala','ngMaterial', 'ngMessages', 'ngRoute', 'angularCSS']);
and the main index.html head contains:
<head>
<title>
Teacher Dashboard
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-css/1.0.8/angular-css.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>
<!--floara editor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/js/froala_editor.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!------>
<script src="./scripts/app.js"></script>
<script src="./scripts/services/service.js"></script>
<script src="./scripts/controllers/selectTopics.js"></script>
<script src="./scripts/controllers/selectTest.js"></script>
<script src="./scripts/controllers/assignQuestionNo.js"></script>
<script src="./scripts/controllers/assignTeachers.js"></script>
<script src="./scripts/controllers/reviewPanel.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/teacherDashboard.css">
<!-- <base href="/">-->
</head>
I am following this link for refernce LINK
Where am i possibly going wrong?
You are probably missing the "froala" angular module in your index.html
Here is the link of the module : angular-froala.js
i want to use ngAnimate but somehow it doesn't work and i don't know why.
i have added everything to my page and have injected them in my app but still i am getting nothing.
here is my index and my app;
var app = angular.module('iranfile', ['ngAnimate','ngRoute','mgcrea.ngStrap']);
<html ng-app="iranfile">
<!-- ye lahze khafe sho-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> home page </title>
<!-- Add Jquery and bootstrap -->
<script src="js/jQuery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.rtl.min.css"/>
<link rel="stylesheet" href="css/bootstrap/bs-additional/bootstrap-additions.min.css"/>
<!-- / Add Jquery and bootstrap -->
<!-- Angular CSS -->
<link rel="stylesheet" href="js/angular/ng-animation.css"/>
<link rel="stylesheet" href="css/angular/angular-motion.min.css"/>
<!-- Angular CSS -->
<link rel="stylesheet" href="js/toastr/toastr.min.css"/>
<!-- Narvan CSS DOCs -->
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/singup.css"/>
<link rel="stylesheet" href="css/estate.css"/>
<link rel="stylesheet" href="css/favor.css"/>
<link rel="stylesheet" href="css/account.css"/>
<!-- Narvan CSS DOCs -->
</head>
<body>
</body>
<!-- ADD AngularJs -->
<script src="js/angular/angular.min.js"></script>
<!--<script src="css/angular/angular-animate.min.js"></script>-->
<script src="js/angular/angular-1.4.4/angular-animate.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/tooltip.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/parse-options.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-route.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-sanitize.min.js"></script>
<script src="js/client-connection.js"></script>
<script src="js/app.js"></script>
I've ran into lots of issues when using angular-strap & bootstrap-rtl
Try removing bootstrap rtl and check...
I am using underscore for check box selections in Angularjs, till now it is working fine but suddenly I am getting the following error.
GET http://localhost/dashboard2/js/d3angular/underscore-min.map 404 (Not Found) testDashboard.do:1
Uncaught TypeError: Cannot read property 'notify' of undefined fo.min.js?v=1_1_31:106(anonymous function) fo.min.js?v=1_1_31:106(anonymous function)
I have got reference to fix this at https://github.com/jashkenas/underscore/issues/1477. But even after changing to underscore.min.map, I am getting similar error . How can I fix this error?
GET http://localhost/dashboard2/js/d3angular/underscore.min.map 404 (Not Found)
The following are the directives that I have included in my angular js application :
var app = angular.module('myApp', [ 'nvd3', 'smartTable.table', 'snap', 'ui.tree', 'ui.bootstrap' ]);
The following are the relevant js and css files I have included :
<script src="/dashboard2/js/d3angular/angular.js"></script>
<script src="/dashboard2/js/d3angular/d3.min.js"></script>
<script src="/dashboard2/js/d3angular/nv.d3.min.js"></script>
<script src="/dashboard2/js/d3angular/angular-nvd3.js"></script>
<script src="/dashboard2/js/d3angular/Smart-Table.debug.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/dashboard2/js/d3angular/snap.js"></script>
<script src="/dashboard2/js/d3angular/angular-snap.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/angular-ui-tree.js"></script>
<script type="text/javascript" src="/dashboard2/js/d3angular/underscore-min.js"></script>
<script src="/dashboard2/js/app.js"></script>
<script src="/dashboard2/js/services.js"></script>
<script src="/dashboard2/js/controllers.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="/js/jquery-1.9.1.js"></SCRIPT>
<script src="/js/jquery-ui-1.10.2.custom.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dashboard2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-slider.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/d3styles.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/smartTable.css" />
<link rel="stylesheet" type="text/css" href="/dashboard2/css/angular-snap.css" />
<link rel="stylesheet" href="/dashboard2/css/angular-ui-tree.min.css">
<link href="/css/ms-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
In project find underscore.min.map file and rename to underscore-min.map or use link http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.map