bootstrapping forerunnerDb into angular- electron app - angularjs

am looking to use a forerunnerDB , as a standalone database and running an electron framework to create a desktop ,
am having problem implementing the bootstrapped process,
var ForerunnerDB = require('forerunnerdb');
var fdb = new ForerunnerDB();
am using angular as the frontend , and electron bootstrapping ,
angular.module('RDash')
.controller('MasterCtrl', ['$scope', '$cookieStore', MasterCtrl])
.controller('tableCtrl',['$scope', '$cookieStore', tableCtrl]);
var ForerunnerDB = require('forerunnerdb');
var fdb = new ForerunnerDB();
but i get require == undefined error , where do bootstrap the forerunner

The require() call is part of Node.js used to include modules for use. If you are trying to instantiate ForerunnerDB on the client-side or in a browser you need to include the file ./dist/fdb-all.min.js instead (which is included in the ForerunnerDB download) as described in the documentation here: https://github.com/Irrelon/ForerunnerDB#use-forerunnerdb-in-browser
In the index.html of your AngularJS app, put this in the <head> section before your angular scripts but after jQuery and other third party libraries:
<script src="./forerunnerdb/dist/fdb-all.min.js" type="text/javascript"></script>
Make sure you change the path of the file to wherever you have put ForerunnerDB.
Disclaimer: I am the creator of ForerunnerDB

Related

Adsense Stopped Showing Ads after Angularjs used

I have an Asp.net mvc site with Google adsense enabled with scripts added in the Layout.cs and contents getting generated via ajax and jquery from api. Everything was working fine and ads where showing
Recently I had added a new page where I used angularjs for databinding using CDN .and the page is working well.but ads stopped showing up. only on that page.the message showing on console is
The resource http://pagead2.googlesyndication.com/pagead/js/r20190313/r20190131/show_ads_impl.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
And in Layout.cs
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1771190807684402",
enable_page_level_ads: true
});
</script>
Adding URL of my Site for reference
JumptoJob-Online exam
And my angularjs controller for page looks simple
<script>
"use strict";
/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/
var mainApp = angular.module("mainApp", ['googlechart']);
mainApp.controller('QuestionController', myControllerFunction);
myControllerFunction.$inject = ["$scope", "$http", "$timeout"];
function myControllerFunction($scope, $http, $timeout) {
}
</script>
I contacted adsense support and provided the URL.they asked me to wait for some hours and then ad start showing. asper them its always better to use adsense directive with angularjs than just using normal adsense script and auto ads

How to inject angular app with api url

I am building an angular app that uses a node api. I need a way to bootstrap the angular code with the url of the node api. I would like the node server to have a config file that holds its own url, which may vary based on dev, test, production, etc (e.g. http://localhost:4000/api or http://www.myproductionbox.com/api/v2).
What is the best way to get this the url from the server config file and merge it into the angular source code dynamically?
I am using jade for html templates and I can get something to work using those:
constants.jade:
|angular.module('myApp', []).value('baseUrl', '#{apiBaseUrl}')
where apiBaseUrl is defined in a config file. The express app renders the jade file like this:
app.get('/constants', function(req, res) {
res.render('constants.jade', { apiBaseUrl: settings.api.baseUrl })
})
This works but feels hacky. What's a better way?
We use an inline <script> to hold all those type of config parameters. Such as
<script>
window.config = {
baseUrl: '#{apiBaseUrl}'
};
</script>
This way your angular app can still live in an external file served from a cdn or something.
And then in your app you do what you were doing before with a slight modification.
angular.module('myApp', []).value('baseUrl', window.config.baseUrl)
You could also create a ConfigService in your app that exposes window.config. Then its easier to mock out those values in your tests.

How to integrate AngularJS with Expressjs & NodeJS ? How to replace Jade with angular?

I have jade as default templates and want to remove completely and use angular instead. How to do it ? How to remove Jade from the package ?
I want to use Plain HTML + Angular for creating frontend without ejs or any package.
Place this in your express app.js file or edit it if already present:
app.use('/', express.static(path.join(__dirname, '/your directory')));
remove any other lines like app.set(views... or app.set(view engine).
First, you need to set your view engine in your Express main app.js file to html.
app.set('view engine', 'html');
Remove all the configurations made in your app.js using
app.set
Now, we need to remove the Jade template engine module from our list of packages installed
npm uninstall jade
Now update your package.json file with
npm update -g
We have now set up our template engine as HTML and now we need to update our express app.js to point to directory for Angular js
Default we use Public directory
app.use(express.static(path.join(__dirname, 'public')));
Now place your Angular js code in public directory of your Express app.
Also, make sure to change the routes accordingly in Angular which will point to Express Node js routes defined as required by your app.
You don't need to use jade with angular.
You can still make html templates with angular in stead.
The way to do that is to create a tag in your html
like:
<your-tagname> </your-tagname>
then you create a simple directive inside your angular js code.
pl.directive('yourTagname', function(){
return {
restrict: 'E' ,
templateUrl: 'view/yourhtmlpagename.html'
};
});
This will load any html sniper/content inside your custum html tag.
If you don't create any jade files, that will be easily ignored.
Only make sure to point to your index.html and not index.jade in your express code if you use node.js.

How can I load a AngularJS file in index.html dynamically?

Each app has different modules, so they need to load different compiled js files in index.html as below.
Just find that it does not work. So is there a good way to do it? or need any callback to boot AngularJS app manually? Thanks.
<script>
var appId = unescape(window.location.href).split('#/')[1].split('/')[0];
loadComponent('../.tmp/client/scripts/' + appId + '.js');
</script>
You can use RequirejS for dynamic loading. You can combine Angular and RequireJS for better performing apps

$httpbackend from ngMockE2E never called

I'm trying to make some backendless e2e tests, so I need to mocks API calls.
Here is what I did:
angular.module('foo.bar.e2eConf', ['foo.bar', 'ngMockE2E']).
run(function($httpBackend) {
$httpBackend.whenGET('/foo/bar').respond({foo:'bar'});
});
Then I configured my conf/karma.e2e.conf like this (pathes are ok):
var basePath = '../';
var files = [
ANGULAR_SCENARIO,
ANGULAR_SCENARIO_ADAPTER,
// bower libs
'components/angular/index.js',
'components/jquery/jquery.js',
'components/angular-resource/index.js',
'components/angular-mocks/index.js',
'components/chai/chai.js',
'test/chai.conf.js',
'src/app/**/*.js',
{pattern:'src/app/**/partials/*.tpl.html', included:false},
'test/e2e/**/*.js'
];
var singleRun = false;
var browsers = ['Chrome'];
var proxies = {'/': 'http://localhost:8000/'};
I can run tests that doesn't involve API calls, but when I run a test that involves it I get a nice Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9876/foo/bar
I guess I misconfigured some stuff, but I can't figure out what??
Is there a conflict between the proxy and the mock? i.e. proxying /foo/bar to http://localhost:8000/foo/bar instead of using the mock?
Any idea?
Regards
Xavier
You need to create a version of your app that bootstraps off the foo.bar.e2eConf module, instead of bootstrapping off the foo.bar module.
You'll have to include the javascript files angular-mocks.js and the new module you defined above in your app index page.
You should be able to test this outside Karma by just using this new app and seeing it return data from your mocks.
You probably don't need to add half those files to the Karma configuration. That's just for adding files to the testing scenario.. its going to load your app in an iframe and your app is responsible for loading it's own javascript.
I'm using php to server up either version of the app depending on what URL I use: either the real version that uses the api calls, or the e2e version that uses the mocks.

Resources