Folks,
i have included ui-date like below
<input ui-date>
Along with the following files :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/angular/date.js"></script>
However I get the following errors:
TypeError: Object [object Object] has no method 'on'
at Object.initDateWidget [as fn] (http://www.myDomain.com/app/lib/angular/date.js:48:19)
Any clue where I may be going wrong ?
The angular-ui.js cdn that I was referencing was errorneous. Replacing that did the trick. However the whole process was quiet frustrating. Small things taking up too much time.
Related
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
I've seen this basic AngularJS code in a tutorial video which gives the output as expected. But when I try the same code locally it does not work, it shows {{message}} as the output.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="Scripts/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope)
{
$scope.message = "First Run...";
}
</script>
</body>
</html>
In the console it shows an error,
Argument 'HelloWorldCtrl' is not a function, got undefined
Error: [ng:areq]
http://errors.angularjs.org/1.3.0-rc.2/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined
Why this same code behaving differently in different environments?
Can someone point out what I'm missing here?
there is something changed in angular1.3.rc2!
http://jsbin.com/sumifozawiji/1/edit
i got same error. 1.2.25 works:
http://jsbin.com/lanavuvaniva/1/edit
Since Angular v1.3.0-beta defining controller constructors in the global scope is no longer supported.
Angular will run, it will bootstrap automatically (because of the ng-app attribute) and expects to find a controller named HelloWorldCtrl (due to the ng-controller="HelloWorldCtrl"). But this controller is defined after Angular, so it is not there at the moment of execution.
The simplest solution is to change the order of the scripts, i.e. put your code before Angular.
I am trying to use chinmaymk.github.io angular-charts from https://github.com/chinmaymk/angular-charts.
I have copied code from the plnkr example: http://plnkr.co/edit/T9J7bz?p=preview
<div data-ac-chart="'bar'" data-ac-data="data" data-ac-config="config" class="chart"></div>
However I don't get any bars on the chart. I can see the legend, horizontal and vertical axis, just no bars.
The data is set up in the controller.
My index.html file has the following imports:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script src="~/App/Vendor/Scripts/d3/d3.min.js"></script>
<script src="~/App/Vendor/Scripts/angular-charts-0.2.0/dist/angular-charts.min.js"></script>
<script src="~/App/app.js"></script>
There are other imports, however I think these are the relevant ones.
My controller and view follow the example above but still I don't see the actual bars.
I don't get any errors in the console.
Any ideas? I am happy to post more code if it would help...
This was solved by removing a script tag referencing a local date.js file. I could not reproduce the error when using: <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>.
It might have been a corrupt date.js file on my side...
There is probably a simple answer to my question although any help will be appreciated.
I use ExtJs with my GE plugin. To get the plugin working I need to include the following in my main HTML page.
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDS</title>
<script src="https://www.google.com/jsapi" id="GoogleEarth"></script>
<script src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"> </script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
</head>
<body></body>
</html>
Now when I want to remove the following code and try to run it as javascript alone the page seems to keep on loading.
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
Even if I remove the code and paste it inside it's own .js file the problem persist.
For example use
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
with content like
google.load("earth", "1");
google.load("maps", "2.xx");
It seems to want to stay in the main page with the script tags.
Is there anyway I can get around this problem?
My main reason for asking is I am using a package that overides my main html everytime I save the project.
The package allows me to add scripts via a link as seen above, although it does not make a difference with the outcome.
I get an error saying TypeError: google.earth is undefined
Please advice.
It is probably simply the order of your script elements.
The scripts are executed in the order they are in the document so your error is because something in app.js or Ext.ux.GEarthPanel-1.3.js is referencing google.earth before the file GoogleEarthStartup.js has been executed - hence google.earth is undefined because google.load("earth", "1"); has not yet been called.
Try fix try simply reordering the script elements like so...
<script type="text/javascript" src="//www.google.com/jsapi" id="GoogleEarth"></script>
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
<script type="text/javascript" src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"></script>
<script type="text/javascript" src="app.js"></script>
I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5
I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.
I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.
Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.
I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!