including external js file into angular - angularjs

I have a java script file that contains a config object for decoding a lot of business jargon for ease of use in my application.
How can I get that to be available to my angular app? I currently have it included in my html file above all the application files.
here is my config.js:
var config = {
"metadata":[
"8235205241531AF399B113140005492E":{
"name":"verison_number"
}
]
}
here is includes:
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-resources/angular-resource.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="js/config.js"></script>
<script src="js/viewer.js"></script>
<script src="js/controller.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
now here is my controller just trying to do a console.log on it:
var MainCtrl = angular.module('MainCtrl', []);
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp', function($scope,$rootScope,$http,startApp) {
console.log(config);
console.log('loading course...');
console.log(startApp);
}]);

Your JSON is incorrect.
Here is the correct way for declaring config:
var config = {
"metadata":[
{"8235205241531AF399B113140005492E":"verison_number"}
]}
Working Plunkr

Maybe using the value recipe. For example:
var app = angular.module('MainCtrl');
// later
app.value('myconfigs',config); // set your "object"
// somewhere in your controller code
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp','myconfigs', function($scope,$rootScope,$http,startApp, myconfig) {
console.log(myconfig.metadata);
console.log('loading course...');
console.log(startApp);
}]);

Related

Jasmine Unit Testing Angularjs

I'm new to Unit Testing. I have followed the tutorials and I have everything
configured on node.js via npm. I have done some describe and it just to get the feel for ho things are set up and my spec runner is fine. The problem I'm trying to get test on controllers figured out but I run in a snag and been trying to figure things out for a while but I continue to get the same error so I thought I would reach out.
I'm trying to do a simple test on a LoginController but I continue to get the same error. I can't point out what I'm doing wrong. Trying to get over this hurdle.
TypeError: angular.mock.module is not a function:
spec runner index html file.
<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" href="../bower_components/jasmine-core/lib/jasmine-core/jasmine.css">
</head>
<body>
<script src="../My Documents/My Website/AngularLogin-
Registration/js/angular-1.6.0.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-route-1.6.0.min.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/boot.js"></script>
<!-- include source files here... -->
<!--<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>-->
<!--<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>-->
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-mock.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/app.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/login/login.controller.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
Here is my test file.
describe('LoginController test', function () {
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars',
function() {
var $scope = {};
var controller = $controller('LoginController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
Thanking You In Advance
PDH
Load angular-mocks library in your spec runner html , make sure to load it after angular.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-mocks.js"></script>
You can also use bower to download the js file instead of the CDN.

Angularjs/Karma: Uncaught ReferenceError: inject is not defined

I got this service
angular.module('common.utils', [])
.service('Timer', function () {
function Timer() {
var start = new Date();
return function () {
return (new Date()).getTime() - start.getTime();
};
}
return Timer;
});
And i'm trying to write a simple test for it:
describe('common.utils', function() {
beforeEach(function () {
module('common.utils');
});
it('has a timer service', inject(function(Timer) {
expect(Timer).not.toBeNull();
}));
});
And I keep getting ReferenceError: inject is not defined.
I included angular.js, angular-mocks.js and all the app files (module is working... ). I don't understand what the problem is...
I had the same problem.
It turns out the issue was in the loading order of the files. You have to load jasmine before you load angular-mocks.
The following loading order will be throwing the error as mentioned in the question:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<!-- include spec files here... -->
<script src="/spec/test.js"></script>
ReferenceError: inject is not defined
In several jasmine examples there is an additional comment included in the code:
<!-- include source files here... -->
The comment helps us to remind to load things in the right order.
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
<script src="/bower_components/jasmine/lib/jasmine-core/boot.js"></script>
<!-- include source files here... -->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<!-- include spec files here... -->
<script src="/spec/test.js"></script>

ionic paypal error Can't find PayPalConfiguration

Refer to ionic-paypal integration, I added the script to my services.js as a factory and run in my real device.
And I add a js to index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="cordova.js"></script>
<script src="lib/external/js/lodash.js"></script>
<script src="js/paypal-mobile-js-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
Once I trigger the function:
PaypalService.initPaymentUI().then(function () {
PaypalService.makePayment($scope.total(), "Total").then(...)
});
I receive the following error
Error: Can't find variable: PayPalConfiguration
configuration#http://{ip}:8100/js/services.js:147:49
http://{ip}:8100/js/services.js:155:83
processQueue#http://{ip}:8100/lib/ionic/js/ionic.bundle.js:27879:30
http://{ip}:8100/lib/ionic/js/ionic.bundle.js:27895:39
$eval#http://{ip}:8100/lib/ionic/js/ionic.bundle.js:29158:28
$digest#http://{ip}:8100/lib/ionic/js/ionic.bundle.js:28969:36
http://{ip}:8100/lib/ionic/js/ionic.bundle.js:29197:33
completeOutstandingRequest#http://{ip}:8100/lib/ionic/js/ionic.bundle.js:18706:15
http://{ip}:8100/lib/ionic/js/ionic.bundle.js:18978:33
// {ip} is my ip address.
PayPalConfiguration should be defined in paypal-mobile-js-helper.js
Edited:
As requested from Martijn Welker, I added more info here:
function configuration() {
var config = new PayPalConfiguration({merchantName: shopSettings.payPalShopName, merchantPrivacyPolicyURL: shopSettings.payPalMerchantPrivacyPolicyURL, merchantUserAgreementURL: shopSettings.payPalMerchantUserAgreementURL});
return config;
}
function onPayPalMobileInit() {
$ionicPlatform.ready().then(function () {
PayPalMobile.prepareToRender(shopSettings.payPalEnv, configuration(), function () {
$timeout(function () {
init_defer.resolve();
});
});
});
}
147:49 is calling PayPalConfiguration in method configuration()
155:83 is calling configuration()
I hope to give you guys ideas.
Thanks for any expert here!

How to parse a simple array with ng-admin

I have an API (http://localhost:5000/v2/_catalog) returning a json structure as follows:
{
"repositories":
[
"start/imageA",
"start/imageA"
]
}
Now I want to parse the result with ng-admin. My admin.js (CORS is solved on my webserver) looks as follows:
var myApp = angular.module('r2ui', ['ng-admin']);
myApp.config(['RestangularProvider', function(RestangularProvider) {
RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url, headers, params, httpConfig) {
delete params._page;
delete params._perPage;
delete params._sortDir;
delete params._sortField;
return { params: params };
});
}]);
myApp.config(['NgAdminConfigurationProvider', function (nga) {
var admin = nga.application('Registry v2 UI')
.baseApiUrl('http://localhost:8081/v2/'); // main API endpoint
var catalog = nga.entity('_catalog');
catalog.listView().fields([
nga.field('repositories', 'embedded_list')
.targetEntity(nga.entity('repositories'))
.targetFields([
nga.field('.').isDetailLink(true),
nga.field('.').label('Repository')
])
.listActions(['edit'])
]);
admin.addEntity(catalog);
nga.configure(admin);
}]);
How can this be achieved?
Update below
Sorry I omitted the file index.html cause I thought it is to obvious to mention:
<head>
<meta charset="utf-8">
<title>Registry v2 UI</title>
<link rel="stylesheet" href="node_modules/ng-admin/build/ng-admin.min.css">
</head>
<body ng-app="r2ui">
<div ui-view></div>
<script src="node_modules/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</body>
</html>
The question is still the same. The array is not parsed correctly and I do not find in the documentation how this could be achieved with the given json.
I've got the same problem, and I finally solved it by set the field type to "choices".
In your case, try to change:
nga.field('repositories', 'embedded_list')
to:
nga.field('repositories', 'choices')

why do I get 'inject' undefined error when using Jasmine with Angular?

I am Jasmine/AngularJS unit testing newbie. I created a simple angular app to add two numbers so that I can learn how to write unit tests for Angular App. The Angular Doc on unit test is incomplete.Based on the blogs and stack overflow answers, I build my first test and I am running into 'injector' undefined error. I am using Jasmine framework for the unit testing.
HTML
<body>
<div ng-controller="additionCtrl">
First Number: <input ng-model="NumberOne"/><br/>
Second Number: <input ng-model="NumberTwo"/>
<button ng-click="add(NumberOne, NumberTwo)">Add</button><br/>
Result: {{Result}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/additionCtrl.js"></script>
</body>
Controller:
function additionCtrl($scope) {
$scope.NumberOne = 0;
$scope.NumberTwo = 0;
$scope.Result = 0;
$scope.add = function (a, b) {
};
}
Jasmine spec file.
describe("Addition", function () {
var $scope, ctrl;
beforeEach(inject(function ($rootScope, $controller) {
this.scope = $rootScope.$new();
ctrl = $controller('additionCtrl', {
$scope: this.scope
});
}));
it("should add two integer numbers.", inject(function ($controller) {
expect(ctrl.add(2, 3)).toEqual(5);
}));
});
Specrunner.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../App/Scripts/additionCtrl.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/addition.spec.js"></script>
This is a failing test and once the test fails with the expected result then I can modify the code to make it pass, but I am facing the problem with somehow angular mock is not getting injector.
I saw an example where I can newup a controller instead of using injector, but I would like to try to learn on using injector so that I am set up more complex tests. I might be missing something simple here. Please direct me to any write up I might have missed.
Thanks
For future reference here's a Plunker with a full unit test setup (for the answer to your question I was about to post)
http://plnkr.co/edit/KZGKM6
Useful to have this setup available for sharing test scenarios.
Found the problem, the url I was using to access angular-mock was wrong. I changed it to "http://code.angularjs.org/1.0.6/angular-mocks.js" and also changed the order of the script tags to
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular-mocks.js"></script>
now it is failing on the method as it is supposed to be.

Resources