The code from official website is not working, getting blank at Plunker, only two places modified:
script.js, var module = angular.module to var m = angular.module
as Plnkr complains about "Redefinition of module".
index.html, explicitly declare height for gridOptions.
You have <script src="scripts.js"></script> when your file is named script.js
Make sure the file reference is the same as in this plnkr
As a side note, it is best to debug your applications by tackling the errors in the order that they appear, sometimes fixing the 404 not found will fix anything that angular wants to complain about...
Related
I was following a tutorial for creating a MEAN stack project with Google Maps integration. I finished the project without any problems, thus, I stopped working on it. When I came back to check on it, it just doesn't work anymore. I didn't change anything with the code. I even pulled a previously working commit from my repository but the error
[$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387)
is still there. I really don;t have an idea what went wrong because this was previously working fine. I hope someone could help.
EDIT. Here's a part of the 'gservice' service of my project.
// Creates the gservice factory.
// This will be the primary means by which we interact with Google Maps
angular.module('gservice', [])
.factory('gservice', function($rootScope, $http) {
The problem is here: components.html
<!-- Client Scripts -->
<script src="../app/client/routes/script.js"></script>
<script src="../app/client/service/gservice.js"></script>
<script src="../app/client/service/aservice.js"></script>
Your scotchApp module is defined in script.js as:
var scotchApp = angular.module('scotchApp', ['ngRoute',
'ngCookies',
'controllerStoreDetail', 'controllerStoreCategory',
'controllerStoreQuery', 'controllerUserDetail',
'controllerUserAuthentication', 'geolocation',
'gservice', 'aservice',
'datatables'
]);
It has a dependency on gservice, aservice etc. But those files are loaded after script.js. So while loading your module (script.js), angular is not able to find definition for those services. You need to make sure that all dependencies are loaded before script.js.
#devqon had asked this question:
Is your js file which declares the gservice module included before the
js file which declares the scotchApp module?
To which you answered:
#devqon Yes it is. I really find this case weird as it was really working perfectly for weeks until now.
Which doesn't seem to be the case.
Rectify the sequence in which you are loading JS files and the error will be gone.
I fixed the problem. The cause was a missing 'v=3' in the src of the script for loading the Google Maps API. I still don't why that's the case as the project was previously working properly.
I apologize if this issue has been resolved somewhere, but every other question I looked at with a similar name was unable to resolve my problem. I have a plunker with a barebones layout of a web app I am working on, but for some reason am receiving an Uncaught Error: [$injector:modulerr] when I try to run it.
I have attached the Plunk below, hopefully someone can point out what the issue is, because I cannot find it. I am using ui-router and ui-bootstrap with twitter-bootstrap styling.
Plunk: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA?p=info
(Never shared a plunk before, so hopefully I did it correctly.)
You didnt include your app file in the script srcs
forked plnkr
<script src="app.js"></script>
You are never including your app.js file, so your Angular module is never actually defined.
I tried adding this line to your plunk and it worked fine.
<script src="app.js"></script>
I have a web app I am launching from Eclipse using Spring Boot. I am trying to use Angular modals to have a nice looking confirm delete modal and I was following this tutorial to get the right dependencies. The Bower install seemed to go well:
bower install angular-modal-service --save
And I copy this into my html:
<script src="bower_components\angular-modal-service\dst\angular-modal-service.min.js"></script>
And I add the dependency in my Angular file:
var app = angular.module('myApp', ['angularModalService']);
But that is the point at which it fails. If I launch my app I just get a blank page, nothing at all loads. My console output from Chrome's developer tools gives me:
Uncaught Error: No module: angularModalService
This is a general problem I have had, anytime I try to add a dependency with something like
var app = angular.module('myApp', ['DEPENDENCY']);
it doesn't work. Is there something more I need to do in Eclipse in order for it to get it to pick up on my Bower dependencies?
When you have such problem, we can't resolve it for you.
But we can give you some advices to resolve this kind of problem :
Identify the problem. Open the developper tools of your navigator (F12), then the console. If you have nothing here, try to refresh. Angular will let you know if there is a dependency injection problem.
Check if you didn't forgot something. You have to import in your page angular, THEN angular-modal-service, THEN your application. The order is important.
Check if the module you want to use doesn't depend to something else. In your case, do this module needs bootstrap JS files ? Again, take a look at the console. It's here to help you.
Perhaps not specifying type="text/javascript in the script declaration causes your browser not to parse and execute the script? It is required in HTML < 5. Try adding that. Maybe that will help. Post your HTML file, if it still does not work.
The angular tutorial switches back and forth between defining modules like this:
angular.module('appname', ['phonecatFilters','phonecatAnimations']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
...
};*/
and like this:
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
etc...
});
}]);
I am not able to get the animation module loaded in my already working app that defines them the first way. I get a "missing provider" error. Is this because I am mixing the methods of defining modules? It is not clear from their documentation and they also switch the entire app between one method and the next during the tutorial, which is frustrating. Thanks anyone!
Are you defining your app module twice?
angular.module('appname', ['phonecatFilters','phonecatAnimations'], ...
The injection should only happen once. Other calls should not use the [], as that will create a new module, replacing your previous.
Either approach is valid and it's unlikely to be the source of your problem. The first possibility that jumps to mind- make sure you've included animate as well. So something like the following (or linking from the CDN) should be in your index.html header.
<script src="angular-animate.js">
Or if that's not it, including your code here and ideally including a version that exhibits the problem on http://plnkr.co so we can all try it out is a big help.
The two different styles stem from javascript which supports each. There's the second approach you show of assigning your module to a variable and then extending it.
And it supports what's called chaining calls as in your first version (firstFunction().secondFunction().lastFunction(). This is especially popular with functional programmers as it fits that mindset/approach nicely.
The answer turned out to be that my version of Angular was 1.0. I was using the angular from the tutorial. I downloaded the working tutorial from the Git repository here: https://github.com/angular/angular-phonecat
and compared all of my files to that side by side. As soon as I upgraded my version to Angular 1.2 used in that demo it worked. There were some other changes I needed to make for the new version (like putting controller names in quotes), but now everything is working. Hope this helps someone else.
An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.