So I am making an AngularJS project and want to put my alasql functionality within a factory that I will inject into my controllers. However, I am getting a console error stating that alasql is not defined in my factory. Here is my code for some files:
// sqlFactory.js
angular.module('app').factory('sqlFactory', sqlFactory);
function sqlFactory() {
alasql("CREATE localStorage DATABASE IF NOT EXISTS db");
alaqsl("ATTACH localStorage DATABASE db");
alaqsl("USE db");
.......
}
I think I am handling the injection into the controller correctly:
// myController.js
angular.module("app").controller("myController", myController);
myController.$inject = ['sqlFactory'];
function myController(sqlFactory) {
....
}
And I am referencing the alasql file in my layout page, although maybe not in the correct order? :
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.3/alasql-worker.min.js"></script>
<script type="text/javascript" src="~/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="~/js/app.js"></script>
<script type="text/javascript" src="~/js/sqlFactory.js"></script>
<script type="text/javascript" src="~/js/site.js"></script>
I am fairly new to using factories and alasql. Anyone know why it is coming back as undefined? Do I need to inject alasql into my factory?
Related
I am creating one small demo for getting user list and also login using angularjs with web api.and I am using datatable for showing user list.then I am include datatable in module file then first time run the project getting like this error.and then remove 'datatable' from the module working very well.so i can not understand where is my mistke.
this is my app.js code:
var app = angular.module("Demo", ['ngRoute','datatables']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'home/dashboard',
controller: 'dashboardcontroller'
}).
otherwise({
redirectTo: '/home/login'
});}]);
this is my included datatable module. i am remove here datatable it's working fine but again add datatable getting error from the module.
this is my script ordering :
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/angular.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
this is error is getting:
so this is my code any one know where is mistake then please let me know.
You need angular-datatable plugin also for inject datatable service in controller
see angular-datatable
Please remove the duplicated import of angular and add the jQuery before the angular's files. Like this:
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
The angular-datatables provides a datatables directive you can add to your <table>
Like this <table datatable="">...</table>
You can have more information here: http://l-lin.github.io/angular-datatables/archives/#!/gettingStarted
<script src="~/assets/js/jquery.js"></script>
<script src="~/assets/js/jquery.datatables.js"></script>
<script src="~/assets/js/angular.js"></script>
<script src="~/assets/angular-route.min.js"></script>
<script src="~/assets/js/angular-datatables.js"></script>
<script src="~/assets/app.js"></script>
<script src="~/assets/services.js"></script>
<script src="~/assets/controller.js"></script>
Try with this
I am creating an Angular App,
var app = angular.module("myApp", ["ngRoute","ngMaterial","ngMessages"]);
When i am using 'ngMessages' with 'ngMaterial', it is not working.
Make sure you have loaded them in the references with the correct versions ,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="app.js"></script>
DEMO
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
Here is my test file for testing the IndexController
//modules/application/tests/spec/controllers/IndexController.js
'use strict';
(function() {
describe('Application IndexController', function() {
beforeEach(function() {
module('HtEwa');
module('HtEwa.Application');
});
var scope, IndexController;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
IndexController = $controller('IndexController', {
$scope: scope
});
}));
it('should expose global scope', function() {
expect(scope.global).toBeTruthy();
});
});
})();
I have seen other answers but it is not working for me. And I have the files included in my karma.conf.js is:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/*/*.js',
'modules/*/*/*.js',
'modules/*/tests/spec/*/*.js'
]);
I have HtEwa and HtEwa.Application module. Under the HtEwa.Application there is IndexController.
//modules/application/controllers/IndexController.js
'use strict';
angular.module('HtEwa.Application').controller('IndexController', ['$scope', 'Global',
function($scope, Global) {
$scope.global = Global;
}
]);
I guess that my IndexController file is not included, but I have included modules/*/*/*.js in my karma.conf.js and that's where the IndexController is.Or Am I missing anything?
Edit:
And the karma --log-level debug shows that all files that are needed is served.
Here are the included files that i watched from chrome
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/adapter.js"></script>
<script type="text/javascript" src="/base/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/base/modules/application/application.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/FooterController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/HeaderController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/application/init.js"></script>
<script type="text/javascript" src="/base/modules/application/routes/ApplicationRoutes.js"></script>
<script type="text/javascript" src="/base/modules/application/services/Global.js"></script>
<script type="text/javascript" src="/base/modules/application/services/HTTPInterceptor.js"></script>
<script type="text/javascript" src="/base/modules/application/tests/spec/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/users/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/routes/Auth.js"></script>
<script type="text/javascript" src="/base/modules/users/services/UserService.js"></script>
<script type="text/javascript" src="/base/modules/users/tests/spec/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/users.js"></script>
<script type="text/javascript">
window.__karma__.loaded();
</script>
Try doing this instead:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/**/*.js'
]);
Notice the use of two *. Read the File Pattern example in the karma configuration documentation.
Wherein the examples are:
**/*.js: All files with a "js" extension in all subdirectories
**/!(jquery).js: Same as previous, but excludes "jquery.js"
**/(foo|bar).js: In all subdirectories, all "foo.js" or "bar.js" files
I have tried to follow the https://github.com/angular-ui/ui-map guide to integrate google maps into my project, but I don't quite understand where I'm going going wrong. I also get a strange error.
I load the following scripts:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-ui-map/ui-map.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&callback=onGoogleReady"></script>
The callback throws an error: Uncaught TypeError: Cannot read property 'appendChild' of null on line 11
My app modules
var app = angular.module('app', [
'ngRoute',
'AppControllers',
'AppFactories',
'ngSanitize',
'AppDirectives',
'ngResource',
'ngAnimate',
'mgcrea.ngStrap',
'ui.map' <---- angular map ui
]);
html from my view
<section id="map" style="height:400px;width:400px;">
<div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>
I don't know where to place the
function onGoogleReady() {
console.log('Google maps api initialized.');
angular.bootstrap(document.getElementById('map'), ['app.ui-map']);
}
bit.
What am I doing wrong?
Ok I managed to get it to work by just loading the Google API in first instead of last.