I am trying to inject alasql so that I can export a table into xlsx sheet. I found AlaSQL as a solution and refered [http://jsfiddle.net/agershun/00nfeq12/][1] . This is the easy solution to my project. But on injecting
//controller.js
var App = angular.module("application", [ 'ngRoute','ngCookies','alasql']);
I get an error:
angular.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=Application&p1=Erro…3A%2F%2Flocalhost%3A5436%2FIAt_cloud%2Fjs%2Fshared%2Fangular.js%3A19%3A463)
I have included all the js files in the main Home page.
//Home.html
<script src="js/shared/angular.js"></script>
<script src="js/shared/angular-route.js"></script>
<script src="js/shared/angular-cookies.js"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
<script src="js/user/controller.js"></script>
Can alasql be used in controller in any other way? Help me out please.
You don't need to inject it like that.
Simply add both the alasql.min.js and xlsx.core.min.js to your html as you have.
However I the correct path for the alaqsl one is /dist/alasql.min.js not console/alasql.min.js. That one is only applicable to the xlsx.core.min.js.
From https://github.com/agershun/alasql/wiki/Angular.js
Please include the file normally and not via requireJS
So please include it without alasql in angular.module(... and use the CDN for AlaSQL to make sure the path does not change:
<script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
Related
Using angularjs routing, sometimes I get
template/home.html Failed to load resource:
the server responded with a status of 404 (Not Found)
But I declared template/home.html inline
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
Unexpectedly I don't get 404 every times, but sometimes.
I've already read this stackoverflow, where they remember this rule https://docs.angularjs.org/api/ng/service/$templateCache
Note: the script tag containing the template does not need to be included in the head of the document, but it must be a descendent of the $rootElement (IE, element with ng-app attribute), otherwise the template will be ignored.
I've declared my angularjs app without ng-app, but through bootstrap
angular.bootstrap(document, ['myapp']);
So my $rootElement is the document. Indeed I don't get the 404 errors every times. Is there some race conditions: sometimes $routerProvider is set before $templateCache is set with my inline template.
I'm using requirejs. Could it be the cause?
Any helps?
I think you may accidentally put your ng-template script outside of the tag where you define your main angular app.
<body ng-app="myApp">
// Your Template shuld stay here
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
</body>
When I try to use the attribute async on my script tags, I keep getting this error:
Uncaught ReferenceError: angular is not defined
Module 'app.main' 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.
When looking on the docs, I saw the recommendation to bootstrap it manually, so I did this:
<script async type="text/javascript" src="dist/js/angular.min.js"></script>
<script async type="text/javascript" src="dist/js/app.min.js"></script>
<script async>
angular.element(document).ready(function() {
angular.bootstrap(document, ['app.main']);
});
</script>
</body>
I know async should be used when the script is at the beggining of the page, but in both situations I had the same error.
As you can see, I tried to manually bootstrap my application at the end. I also tried using that same code inside my app.min.js file, at the end of the file, but both scenarios gave me the same results.
If I remove the attr async, everything gets back to normal and work again, but how am I supposed to solve this problem?
Just so you know
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Thanks :)
I am moving my controllers from one unique file containing my whole app to separate files and get that error : "Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined"
I used the setting method to define my app in app.js :
var app = angular.module('CMT', ['ui.router', 'angularCharts', 'uiSwitch']);
I then created a file MainCtrl.js with :
angular.module('CMT').controller('MainCtrl', [
'$scope', 'reviews', '$location',
function($scope, reviews, $location){
}]);
And I have included the files in index.html after including the angular source code :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src='library/d3.min.js' type='text/javascript'></script>
<script src='library/angular-charts.min.js' type='text/javascript'></script>
<script src="node_modules/angular-ui-switch/angular-ui-switch.min.js"></script>
<script src="app.js" type='text/javascript'></script>
<script src="MainCtrl.js" type='text/javascript'></script>
Any hint or solution ?
Try the following:
In your app.js, inject your MainCtrl.js, like:
var app = angular.module('CMT', ['ui.router', 'angularCharts', 'uiSwitch', 'CMT.MainCtrl']);
And in your MainCtrl.js:
angular.module('CMT.MainCtrl', [])
EDIT:
An AngularJS module is a container. In every Angularjs app, you have one "main" module, and typically many sub-modules. These sub-modules are useful for modularizing/separating your app into components, like controllers, services etc. Initially you had one main module, which also contained the code for your controller. When you decided to move your controller out of the main module, what you wanted to do was move it into a sub-module.
So there were two problems with what you did:
You named your controller module (which is your sub-module in this case) the same name 'CMT' as that of your app/main module. Your sub-modules need to have unique names, and it is good practice to use the . separator - see this Angular style guide.
You didn't "link" your controller module to your app module in an Angular way. Just adding the script to your html isn't enough. If you have a sub-module called CMT.MainCtrl, you need to inject it into your main CMT module.
Judging by your naming convention MainCtrl.js versus something like controllers.js, I'm guessing you're organising your code by feature, instead of by type? In any case, read Angular best practices for more info on Angular directory structure.
Specify all your services/controllers/filters/directives files before the app.js file
<script src="MainCtrl.js" type='text/javascript'></script>
<script src="app.js" type='text/javascript'></script>
Note: you don't need to care about these file orders if you bundle all your script files into single file
I'm new to angularjs and ui-bootstrap 13 and need some help.
I'm getting a unresolved from thew angularjs injector and can't figure out why.
The module definition looks like this:
var app = angular.module('MobileCOP', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"ui.bootstrap"]);
The controller looks like this:
app.controller('CDRserver',['$rootScope','$scope','$location','serverList','$modal',
function($rootScope, $scope, $location, serverList, $modal ){
All I need to do to cause the error is inject $modal into the controller. I don't reference the modal in the code, just adding the modal service to the controller causes the issue. When the service is removed the error stops.
I'm assuming I'm missing something obvious.
Edit" As per request showing the controller assignment into the html:
.when('/cdrquery', {
templateUrl: '/MobileCOP/tmpl/CDRlist.html',
controller: 'CDRList'
})
Error:
[$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24modal
z/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
Zb/l.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:34:1
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
Zb/q.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:57
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
Zb/q.$injector<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:75
c#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
f/<.instantiate#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464
Md/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:484
z/<.link#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:7:248
J#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492
h#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28
ba/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200
Z/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431
q#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:50:162
v#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:6:357
Wd/this.$get</h.prototype.$broadcast#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:110:279
l/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:11:177
ve/e/l.promise.then/H#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/e/l.promise.then/H#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/f/<.then/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:98:173
Wd/this.$get</h.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:36
Wd/this.$get</h.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:105:323
Wd/this.$get</h.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:368
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:71:118
C#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:75:241
re/</y.onreadystatechange#http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:76:280
<ng-view class="app-content ng-scope">
Loading scripts code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>
<script src="/MobileCOP/libs/mobile-angular-ui.min.js"></script>
<script src="/MobileCOP/libs/ui-bootstrap-0.13.0.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="/MobileCOP/libs/mobile-angular-ui.gestures.min.js"></script>
<script src="/MobileCOP/libs/xml2json.min.js"></script>
It appears that you are not using a template enabled version of the ui-bootstrap libraries. From the ui-bootstrap FAQ:
The dist files with the -tpls- in their name come with the templates bundled inside $templateCache . You can check how this bundling works by inspecting this file. The important point here is that templates are part of the distribution file so you don't need to download them separately. Also, those templates are pre-loaded with JS file so a browser won't request them on run-time.
bottom line, for template enabled modules like modal to work, you need to be loading the script ui-bootstrap-tpls-0.13.0.js.
The error you are getting is coming from the templateRequestProvider when it looks for a template for $modal that isn't in the template cache.
OK cleared up the issue.. ui-bootstrap-tpls-0.13.0.js is incompatible with angularjs 1.2.15. Upgraded to 1.3.14, the error is gone.
Hi folks i am using Angular JS & Kendo UI in my application. I am getting a strange error which i am unable to get around. i.e. TypeError: object is not a function
TypeError: Function expected
at Anonymous function (.../app/lib/angular/angular.js:3745:29)
at Anonymous function (.../app/lib/angular/angular.js:3828:22)
at Anonymous function (.../app/js/directives/angular-kendo.js:142:21)
at invoke (.../app/lib/angular/angular.js:2795:18)
at instantiate (.../app/lib/angular/angular.js:2805:7)
at Anonymous function (.../app/lib/angular/angular.js:4621:7)
at Anonymous function (.../app/lib/angular/angular.js:4198:13)
at forEach (.../app/lib/angular/angular.js:117:11)
at nodeLinkFn (.../app/lib/angular/angular.js:4185:11)
at compositeLinkFn (.../app/lib/angular/angular.js:3823:14)
While i did some research online i found this to be an issue when the order of the script files in the html file are not proper. Hence, i added this in the following order.
<script src="lib/jquery/jquery-1.8.2.min.js"></script>
<script src="lib/kendo/kendo.all.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/directives/angular-kendo.js"></script>
Am i missing anything? Has it anything to do with the version of Angular/jQuery? I am using jQuery 1.8.2. Also angular-kendo.js for "kendo.directives".
Please suggest.
Use Angular v1.0.5 & jQuery 1.9 and above (though i used 1.11.1)
Have the scripts in proper order as below :
<script src="lib/jquery/jquery-1.8.2.min.js"></script>
<script src="lib/kendo/kendo.all.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/directives/angular-kendo.js"></script>
Thanks a ton # Lars Hoppner & #jayesh Goyani for your quick help and valid inputs.