Angular Module Loading Issue with AngularJS-ResponsiveCalendar - javascript

I am trying to use the AngularJS-ResponsiveCalendar on my page. Here is the link to the actual control:
https://github.com/twinssbc/AngularJS-ResponsiveCalendar
I have an Index file which contains the following:
<!-- Adding the Angular Javascript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://twinssbc.github.io/AngularJS-ResponsiveCalendar/dist/js/calendar-tpls.js"></script>
<script src="~/Scripts/scheduleController.js"></script>
In the scheduleController.js I have the following:
angular.module('App', ['ui-rCalendar'])
I think the above line causes the issue:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=GCCICR&p1=Error%3A%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)

Related

angular UI bootstrap throws error

I am very new to angular-Js. I am trying to use the bootstrap angular UI as part of my learning I have taken code from https://angular-ui.github.io/bootstrap/.
the accordian module. http://imgur.com/h1IFF0g
But on page load I am getting below error for each accordion component.
VM5120:27 TypeError: $q.resolve is not a function at collapse (ui-bootstrap-tpls-1.3.3.js:66)
at Object.fn (ui-bootstrap-tpls-1.3.3.js:102)
at l.$digest (angular.js:14243)
at l.$apply (angular.js:14506)
at l (angular.js:9659)
at S (angular.js:9849)
at XMLHttpRequest.D.onload (angular.js:9790)
I am declaring dependency in my app.js file as
var mainApp = angular.module("myApp", ['ngRoute', 'myApp.view1','myApp.view2', 'myApp.login', 'ui.bootstrap']);
I have downloaded the ui-bootstrap-1.3.3.js and included them in my project as below.
<script src = "https://connect.facebook.net/en_US/sdk.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="ui-bootstrap-1.3.3.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Could someone please guide me in understand where I am doing wrong.
Please let me know if I need to provide any further information.
I could resolve it by changing the angular js version to 1.4.3.
https://github.com/angular-ui/bootstrap/issues/5490 helped me.
Thank you!!

Error: [$injector:nomod] when attempting to add 3rd party module to mean app.

I'm trying to add this: https://github.com/kuhnza/angular-google-places-autocomplete module to my mean app. I used bower to install, which included the following example.
<!DOCTYPE html>
<html ng-app="example">
<head lang="en">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places"></script>
<script src="/lib/angular/angular.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="/lib/angular-google-places-autocomplete/src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller with a scope variable 'place'
.controller('MainCtrl', function ($scope) {
$scope.place = null;
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Basic Usage</h1>
<form class="form">
<input class="form-control" g-places-autocomplete ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
When I run my app on localhost and type the url corresponding to the location of the example, everything works fine. But instead, if I copy and paste this code into view.html and follow a link to this file, the code is nonfunctional. Now, if I add 'google.places' to the var applicationModuleVendorDependencies array in config.js, I get the following error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module borowr due to:
Error: [$injector:modulerr] Failed to instantiate module google.places due to:
Error: [$injector:nomod] Module 'google.places' 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 is the proper way to add 3rd party modules to a mean app?
Looks like you're on the right track, did you inject the dependency into the controller for that view?
I had the same problem when adding a 3rd party module to my mean app. Check this link: https://stackoverflow.com/a/36032008/6044269
That is how added ngDialog to my mean app, should be the same for you, except for the CSS files.
As far as i know this is the only way i manage to add 3rd party modules.

Angular Filter and NgAnimate conflict

I am using angular-filter and angular-animate together, because I need do a group by in ngRepeat, but when I try to run, I am getting a error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=SsrsToolApp&p1=Erro…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.5%2Fangular.min.js%3A37%3A180).
Testing I detected a possible conflict, because when remove ['ngAnimate'], it is working fine.
This is the code example with error:
<!doctype html>
<html ng-app="SsrsToolApp">
<head>
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
ready
<script>
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate'], ['angular.filter']);
</script>
...
</body>
</html>
I need those modules in my app. What do you think? How can I do to solve this problem?
To inject multiple modules in AngularJS specify them as array elements:
var ssrsApp = angular.module('SsrsToolApp', ['ngAnimate', 'angular.filter']);
The third argument to angular.module is a configuration function. The error you are getting is complaining that you're injecting a string ('angular.filter') rather than a function.

Angular js module won't load

I get always the following error in angular js when I add ng-app="adminApp" to the body. The error is thrown during auto bootstrap.
Uncaught Error: [$injector:modulerr] Failed to instantiate module adminApp due to:
Error: [$injector:nomod] Module 'adminApp' 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.
If I change it to only ng-app the error won't show up but i can't use ngRoute as it needs the app to be given a name. I read lots of solutions for this problem last 2 days but i found none of them working for me.
I removed everything and still won't work. I left only the ng-app and 3 elements.
index.html:
window.mainmodule = angular.module('adminApp', ['ngRoute','ngMaterial']);
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1" />
</head>
<body ng-app="adminApp">
<div id="loadingscreen">
<div style="left:0;top:0;width:0px;height:20px;background-color:#0000FF;" id="loadingbar"></div>
<div class="center">Loading...</div>
</div>
<script type="text/javascript" src="utils/angular.js"></script>
<script type="text/javascript" src="utils/angular-route.js"></script>
<script type="text/javascript" src="utils/angular-animate.js"></script>
<script type="text/javascript" src="utils/angular-aria.js"></script>
<script type="text/javascript" src="utils/angular-material.js"></script>
<script type="text/javascript" src="utils/require.js" data-main="modules/main"></script>
</body>
</html>
EDIT: I use angular v1.5.0-rc.0.
Codepen: http://codepen.io/anon/pen/pgwZLq
original link
If you are using require.js, you need to programmatically bootstrap your angular application.
//kickoff the app
require(["app", "routes" ], function(){
angular.module('adminApp', ['ngRoute','ngMaterial']);
angular.bootstrap(document, ["adminApp"]);
});
When angular.js is loaded, it traverses the DOM and looks for "ng-app" to start the bootstrapping process. At that point of time your require.js dependency files hasn't been loaded on the page yet. So when angular tries to start the application and looks at your "adminApp", it doesn't exists yet. So, by deferring the bootstrapping, you'll have a chance the load your js files before angular goes out and bootstraps your app.
Remove ng-app tag from html. It will be added during bootstraping.

Uncaught TypeError: undefined is not a function initslider-1.js:1 (anonymous function) AmazingSlider

I have gone through the other posts also. But I didn't get any solution finally I have my own question.
I am trying to add Jquery image slider into my project, I am using Codeigniter Platform as I am running this slider stand alone it is working fine. But not in CI it throws error Uncaught TypeError: undefined is not a function initslider-1.js:1
(anonymous function). Anybody will suggest me any help.
see following are the js files which I am including.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/jquery.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
Click here to see the ref.
try removing one of the jQuery script-tags.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="sliderengine/jquery.js"></script> -->
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>
Why are you using two jQuery at the same page. try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="sliderengine/amazingslider.js"></script>
<script src="sliderengine/initslider-1.js"></script>

Categories

Resources