I am trying to use scroll-glue to automatically scrolls to the bottom of message.html page. I tried to add the directive 'luegg.directives' like this.
(function(){
'use strict';
var module = angular.module('app', ['onsen','luegg.directives']);
but i'm getting this error
Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module luegg.directives due to:
[$injector:nomod] Module 'luegg.directives' 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.
What am I doing wrong? also, is there any other way to auto scroll to the bottom of the page?
Please add file (scrollglue.js) of 'luegg.directives' after angularjs files in index.html.
Check following inclusion I did for me.
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script type="text/javascript" src="js/higgidy_carousel.js"></script>
<script type="text/javascript" src="bower_components/ngtouch/build/ngTouch.min.js"></script>
<script src="bower_components/ng-swippy/ng-swippy.js"></script>
<script type="text/javascript" src="js/ng-infinite-scroll.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.3/angular-sanitize.js"></script>
<script type="text/javascript" src="js/angular-translate.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/angular-base64.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<script type="text/javascript" src="js/scrollglue.js"></script>
Related
I've developed an AngularJS App and it works on Firefox,Opera,Safari, Edge, and Chrome but it won't work on IE 11.
Here is the specific error message I get in opening the app in IE 11:
[$injector:modulerr] Failed to instantiate module TicketSystemApp due
to: Error: [$injector:modulerr] Failed to instantiate module
TicketSystemControllers due to: Error: [$injector:nomod] Module
'TicketSystemControllers' is not available! You either misspelled the
module name or forgot to load it.
It seems like my module app is not loading.
Here is my entire script load:
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Angular js -->
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<!-- auto-scroll module -->
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src = "js/app.js"></script>
<!-- Controllers -->
<script src = "js/controllers.js"></script>
<script src ="js/globalFunctions.js"></script>
<!-- Custom File Upload Angular -->
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<!-- FACTORY -->
<script src = "js/authInterceptor.js"></script>
<!-- Services -->
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<!-- loading bar -->
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
I have this in as my html tag:
<html lang="en" ng-app="TicketSystemApp" xmlns:ng="http://angularjs.org" class="ng-app:TicketSystemApp" id="ng-app">
And I do have this in my head tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I have tried manually bootstrapping but I just get the same error message twice.
Here is my app.js(Just the initialization):
var TicketSystemApp = angular.module('TicketSystemApp',[
'ngRoute',
'TicketSystemControllers',
'angular-loading-bar',
'ngAnimate',
'ui.router',
'ui.bootstrap',
'ngMaterial',
'md.data.table',
'angular-toArrayFilter'
]);
Here is my controller.js(just the initialization). I use this to module to contain all controllers:
var TicketSystemControllers = angular.module('TicketSystemControllers',[
'ngRoute',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'ngAnimate',
'ngMaterial',
'ngMessages',
'ngFileUpload',
'md.data.table',
'bootstrapLightbox',
'luegg.directives'
]);
Kenta, it looks like you are not actually creating a controller at all. What you have done is created two modules, is that your intention? If so that is fine but you need to readjust your scripts and make sure you clear cache. IE 11 has an atrocious caching problem. Your scripts should be ordered this way
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
Also I noticed you have a global functions file. That file should be first if you have anything in the other two files that reference it. I suggest setting your scripts like this.
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
<script src ="js/globalFunctions.js"></script>
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<script src = "js/authInterceptor.js"></script>
I don't know if this is the exact order unless I see all of your JS but I assume this is pretty close. Usually you want all files your create in the correct order at the bottom of your and all vendor/3rd party files at the top in the correct order.
You load the controller before you declare the angular module
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
If you change the order to
<script src = "js/app.js"></script>
<script src = "js/controllers.js"></script>
it should works.
Maybe the same with toArrayFilter.js?
You have to be sure, that the module definition is made before you load some controllers, directives or factories!!!
In my case it was using const val = something.
When I changed it to var val = something, the error was gone.
Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.0/$injector/modulerr?p0=foo&p1=%5B%24injector%3Anomod%5D%20Module%20'foo'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.4.0%2F%24injector%2Fnomod%3Fp0%3Dfoo%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1957%3A71%0Aensure%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1879%3A45%0Amodule%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1953%3A20%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4340%3A35%0AforEach%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A338%3A24%0AloadModules%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4324%3A12%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4250%3A22%0AdoBootstrap%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1627%3A34%0Abootstrap%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1648%3A23%0AangularInit%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1542%3A14%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A28130%3A16%0Atrigger%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A2975%3A9%0AeventHandler%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A3249%3A25
I have included below reference in index.html
<script type="text/javascript" src="assets/js/angular/angular.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-route.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-resource.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-cookies.js"></script>
<script type="text/javascript" src="assets/js/angular-filter/angular-filter.min.js"></script>
<script type="text/javascript" src="assets/js/select/select.min.js"></script>
<script type="text/javascript" src="assets/js/ui-utils/ui-utils.min.js"></script>
<script type="text/javascript" src="assets/js/ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
and my js file looks like:
'use strict';
var fooApp = angular.module('foo', ['ui.utils', 'ui.bootstrap', 'ngRoute', 'ngResource', 'ngCookies', 'angular.filter', 'ui.select']);
You need to include angular-cookies in your index.html and then inject the ngCookies dependency.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-cookies.js">
In the module, you have to make sure that, you have included all the dependencies for the module 'app'
It shows that some of the dependencies are not loaded.
you have to include ngCookies in your app
please refer
https://docs.angularjs.org/api/ngCookies
or include <script src="ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-cookies.js"> in your index file after angularjs
I encountered a problem where my AngularJS webpages don't load properly sometimes. When this happens, the code in the corresponding controller does not run. It only happens rarely. I suspect that this could be due to the loading order of AngularJS files. Perhaps there are other possible causes. Please alert me if you can think of any. Below is my code showing the loading order of the html page;
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.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="vendor/dialogs.min.js" type="text/javascript"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="vendor/angular-translate.min.js"></script>
<link href="vendor/dialogs.css" rel="stylesheet">
Is there anything wrong?
First Load angular library:
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="vendor/dialogs.min.js" type="text/javascript"></script>
<script src="lib/angular/angular-sanitize.min.js"></script>
<script src="vendor/angular-translate.min.js"></script>
After that load your controllers, services, filters, directives
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
Finally, now you can load your app init file
<script src="js/app.js"></script>
Although the order is correctly mentioned by Nitish,
you should consider using a script loading tools such as require js as mantaining the inter-dependency between libraries will get messy once you have a large no of files to include.
In the beginning of my html I've declare my application:
<html lang="en" ng-app="MyAppModule">
and at the bottom I have include all the necessary files, the Chrome does not complain for any missing file:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controllers/EventController.js"></script>
<script src="js/Services/EventService.js"></script>
<script src="js/filters.js"></script>
Here is my application:
'use strict';
// Declare app level module which depends on filters, and services
var MyAppModule = angular.module('MyAppModule', ['ngResource']).config(function($routeProvider){
$routeProvider.when('/mybooks',{
templateUrl:'/templates/mybooks.html',
controller:'EventController'
}
);
});
But when I am trying to see the page there is a Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.14/$injector/modulerr?p0=MyAppModule&p1=Err…js.org%2F1.2.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20...<omitted>...2) on the browser. Any help? Am I missing something?
Try replacing this:
['ngResource']
With this:
['ngResource', 'ngRoute']
It looks like you're not injecting the route provider.
I have problem with simple modal! Is not working I got some errors! I have mootols and jquery in header.php
Error is:
Uncaught TypeError: Object #<Object> has no method 'addEvent' demo.js:8
(anonymous function) demo.js:8
(anonymous function) mootools-core-1.3.1.js:354
h mootools-core-1.3.1.js:32
Array.implement.each mootools-core-1.3.1.js:38
invoke.fireEvent mootools-core-1.3.1.js:353
h
My code is:
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Move your last script tag to first
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
It will work..
or may be you have multiple instances of jQuery on your page.
You need to either:
Aet rid of one of them (there's no need to have both)
Alias the jQuery used in custom.js
Use noConflict() to resolve which jQuery gets access to the $
variable.