angular UI bootstrap throws error - javascript

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!!

Related

Why does this simple Angularjs using syncfusion throws me the error Uncaught TypeError: Cannot read property 'widget' of undefined

I am relatively new to Angularjs and I am trying to use Syncfusion to implement few diagrams so I started with a simple code using the angularjs CDN provided in their website. But it throws me error. I am not sure what I am doing wrong. I could not find any post related to similar thing in SO or in Syncfusion forum. Can anyone please help me? I am really sorry if incase this is duplicate
This the help doc from their website: Help DOC Syncfusion AngularjS
This is the CDN links page: https://help.syncfusion.com/js/cdn#gsc.tab=0
Following is the code:
<!DOCTYPE html>
<html ng-app="DateCtrl">
<head>
<title>Testing EJAngular</title>
<!--jQuery Starts-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<!--jQuery Ends-->
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
</script>
</head>
<body ng-controller="DatePickerCtrl">
<!--Container for ejDatePicker widget-->
<input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
<script type="text/javascript">
var DateCtrl = angular.module('DateCtrl', ['ejangular'])
DateCtrl.controller('DatePickerCtrl', function ($scope) {
$scope.dateValue = "2/3/2013";
});
</script>
</body>
</html>
Error Messages from console:
Posting this answer as it maybe useful for someone in the future. Few more CDN needs to be added. Here is all CDN:
<link href="http://cdn.syncfusion.com/18.2.0.44/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/18.2.0.44/js/web/ej.web.all.min.js"></script>
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
This issue generally arises when we haven’t referred the required Syncfusion script files. Check out the AngularJS documentation in the below link.
https://help.syncfusion.com/angularjs/overview
https://help.syncfusion.com/angularjs/accordion/getting-started#create-a-simple-accordion-in-angularjs
check the below link for DatePicker demo.
http://jsplayground.syncfusion.com/a1zdhiii
Check the below links to know more about Syncfusion AngularJS DatePicker.
Behavior : https://help.syncfusion.com/angularjs/datepicker/behavior-settings
Value binding: https://help.syncfusion.com/angularjs/datepicker/data-and-event-binding
API reference: https://help.syncfusion.com/api/js/ejdatepicker
We can also raise queries in Syncfusion forums.
https://www.syncfusion.com/forums

Angular Module Loading Issue with AngularJS-ResponsiveCalendar

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)

Failed to instantiate module myApp due to: Error: [$injector:nomod] http://errors.angularjs.org/1.2.26/$injector/nomod?p0=myApp

I'm trying to learn Angular and attempting to write my first controller outside of a web-based tutorial. I keep getting the error in the title in the JS console and can't figure out what's going on. The link takes me to a page referencing the need to include ngRoute, which I've done according to the API. Surely I'm missing something but I can't see what it is. Any help would be greatly appreciated, thanks!
index.html
<DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Angular Project</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="FirstController">
Did the controller load?
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})
Your issue is that you forgot to invoke the iife which registers module and controller.
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})();//<-- here
Link (in the error) talks about ngRoute as a hint only for one of the reasons your module might not have been available/instantiated when angular ng-app directive tried to bootstrap it. But in your case it does not even exists due to your failure to invoke the anonymous function as IIFE.

alert box using angular strap library isn't working for me

Following this example
http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview
And i got it exactly that way and it's not working for me!! :( why??
I'm including the following libraries in my index.htm
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="angular/angular.min.js"></script>
<!-- <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="bootstrap/js/twitter-bootstrap.min.js"></script>
<!-- Angular Libraries -->
<script type="text/javascript" src="angular/angular-route.js"></script>
<script type="text/javascript" src="angular/angular-local-storage.js"></script>
<script type="text/javascript" src="angular/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script type="text/javascript" src="angular/angular-strap.js"></script>
<!-- App related libraries -->
<script type="text/javascript" src="js/services/ProductServices.js"></script>
<script type="text/javascript" src="js/controllers/ProductControllers.js"></script>
<script type="text/javascript" src="js/controllers/ModalControllers.js"></script>
<script type="text/javascript" src="js/directives/ProductDirectives.js"></script>
Then from my Controller where i'm creating the module i add the $angular.strap dependency like in the example:
var productApp = angular.module('productApp', ['ngRoute', 'LocalStorageModule', 'ui.bootstrap', '$strap.directives']);
And in the view where the error is being displayed i do this:
<notification ng-model="successAlert"></notification>
From the controller where i set the "successAlert" message, i'm just simply adding a value like this:
$scope.successAlert = data.response;
Now first of all, in the console is throwing this error without even touching anything:
TypeError: Cannot read property 'title' of undefined
at Object.fn (http://localhost:8080/RESTFulAngularJS/angular/angular-strap.js:40:35)
at f.$digest (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:99:141)
at f.$apply (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:101:369)
at f (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:67:175)
at Q (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:71:99)
at XMLHttpRequest.y.onreadystatechange (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:72:130)
And then, when i go into the function that triggers the alert, throws this:
TypeError: Cannot read property 'type' of undefined
at Object.fn (http://localhost:8080/RESTFulAngularJS/angular/angular-strap.js:45:42)
at f.$digest (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:99:141)
at f.$apply (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:101:369)
at f (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:67:175)
at Q (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:71:99)
at XMLHttpRequest.y.onreadystatechange (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:72:130)
Is there any problem with my libraries? Can you guys help me? Don't know what's wrong really... it's exactly the same way applied as in the example, the same order of script imports... :S
From the error message you have posted I m guessing that your data.response object is undefined and hence your notification will never be shown. If you look closely at the example in the plunker the message object is of form :
{
"type": "info",
"title": "Success!",
"content": "alert directive is working pretty well with 3 sec timeout"
}
And you should respect this. Maybe you could share with us what this data.response should look like and how you are retrieving it.

What is the cause for "angular is not defined"

I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

Categories

Resources