We Keep Coding

Use abp.services in JavaScript in ASP.NET Web Forms

I know this question was asked before, but my question is about using abp.services methods in JavaScript directly.
Suppose I have:
public interface ISecurityAppService : IApplicationService
{
List<PacsUser_C_Extented> GetAll();
}
public class SecurityAppService : ApplicationService, ISecurityAppService
{
public List<PacsUser_C_Extented> GetAll()
{
// ...
return allUsers;
}
}
All the boilerplate services will be registered nicely as:
public class Global : AbpWebApplication<ImmenseWebModule>
{
protected override void Application_Start(object sender, EventArgs e)
{
base.Application_Start(sender, e);
}
}
As the ASP.NET Boilerplate documentation said, to be able to use the auto-generated services, you should include needed scripts in your page like:
<script src="~/Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="~/api/AbpServiceProxies/GetAll?type=angular"></script>
I know the second line says to use angular controller, but I change it to:
<script src="~/api/AbpServiceProxies/GetAll?v=#(Clock.Now.Ticks)">script>
...still nothing works.
When I want to use getAll in an ASP.NET Web Form's JavaScript code, it gives me:
abp.service is not defined
So how can I use getAll or another method in SecurityAppService in the script element <script>...</script> — not Angular?
Thanks in advance.
Update
When I use an Angular controller and MVC partial view like:
(function () {
var app = angular.module('app');
var controllerId = 'sts.views.security.list';
app.controller(controllerId, [
'$scope', 'abp.services.remotesystem.security',
function ($scope, securityService) {
var vm = this;
vm.localize = abp.localization.getSource('ImmenseSystem');
vm.users = [];
vm.refreshUserList = function () {
abp.ui.setBusy( // Set whole page busy until getTasks completes
null,
securityService.getAll().success(function (data) {
vm.users = data;
abp.notify.info(vm.localize('UserListLoaded'));
})
);
};
vm.refreshUserList();
}
]);
})();
I am able to use that function.
But I want to use that in JavaScript in ASP.NET Web Form pages.

Finally I resolved it by a simple way as the below steps...
1- Run project and use that boilerplate services by Angular and Partial view (MVC)
like Update section in question.
2- After running and redirecting to a view, I went to View page source and see the dependencies scripts .
3- I copied the below scripts source to a page:
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Abp/Framework/scripts/utils/ie10fix.js"></script>
<script src="Scripts/json2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script src="Scripts/sweetalert/sweet-alert.min.js"></script>
<script src="Scripts/others/spinjs/spin.js"></script>
<script src="Scripts/others/spinjs/jquery.spin.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/angular-ui/ui-utils.min.js"></script>
<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>
<script src="Abp/Framework/scripts/libs/abp.toastr.js"></script>
<script src="Abp/Framework/scripts/libs/abp.blockUI.js"></script>
<script src="Abp/Framework/scripts/libs/abp.spin.js"></script>
<script src="Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>
<script src="Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
and use getAll method like:
<script>
var securityService = abp.services.remotesystem.security;
securityService.getAll().done(function (data) {
for (var i in data)
console.log(data[i].username);
});
</script>
I think the important staff to use auto-generated services is :
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
Thanks for your attention.

you are injecting abp.services.remotesystem.security.
so you can use this namespace to access the functions. open chrome console and write abp.services.remotesystem.security you will see the functions

AssetApplicationService must be implemented by IApplicationService and then check your module load correctly and add correct dependencies in other modules like this.
Check this link. It's worked for me.

$injector:modulerr Injecting Custom Module Into Angular App

I have this main application called dashboard and I want to inject a custom made module called core.
I keep getting this injection error and I have no idea why. I am following a template that my co-worker has and it is pretty much word for word so I do not know why it is not working for me.
app.js
(function(){
'use strict';
var dependencies = [
'ngRoute',
'core'
]; // all our modules
angular.module('dashboard', dependencies).config(Config); //.config(Config);
Config.$inject = ['$locationProvider'];
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
angular.element(document).ready(function(){
angular.bootstrap(document, ['dashboard']);
});
})();
layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/javascripts/bootstrap/dist/css/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="flud-container">
{{{body}}}
</div>
</body>
<!-- JS Libraries -->
<script type='text/javascript' src='/lib/jquery/dist/jquery.min.js'></script>
<script type='text/javascript' src='/lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script type='text/javascript' src='/lib/angular/angular.min.js'></script>
<script type='text/javascript' src='/lib/angular-route/angular-route.min.js'></script>
<script type='text/javascript' src='/modules/core/core.client.module.js'></script>
<script type='text/javascript' src='/modules/core/config/core.client.routes.js'></script>
<script type='text/javascript' src='/app.js'></script>
</html>
core.client.module.js
(function(){
'use strict';
// var dependencies = [
// ];
angular.module('core', []);
angular.module('core').run(intialize);
initialize.$inject = ['$rootScope', '$location'];
function intitialize($rootScope, $location){
//initialize module's variables here
}
});
console error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=dashboard&p1=Error%…(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.min.js%3A20%3A463)

As you were using IIFE pattern for restricting the scope of code, you should invoke function of core.client.module.js immediately to core module get available.
core.client.module.js
(function(){
//---- code here-----//
})(); //<---invoke the function

Uncaught Error: [$injector:modulerr] Failed to instantiate module toastr

I am working on a SailsJS web app, using Angular. However, I am running into issues. When I load my page, nothing appears and the copnsole is full of errors, most elating to angular.js
ncaught Error: [$injector:modulerr] Failed to instantiate module HomepageModule due to:
Error: [$injector:modulerr] Failed to instantiate module toastr due to:
Error: [$injector:nomod] Module 'toastr' 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.
As you can see from the page source below, there is a link to toastr, which if I click, it goes to the source file of javascript. I have tried alternating the order so jQuery loads first (doesn't help). What is causing these errors?
<!DOCTYPE html>
<html>
<head>
<!--STYLES-->
<link rel="stylesheet" href="/bower_components/toastr/toastr.css">
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
<script type="text/javascript">
window.SAILS_LOCALS = { _csrf: "null" };
</script>
</head>
<body ng-app="HomepageModule" ng-controller="HomepageController" ng-cloak>
//content of my page
</body>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
</html>
HomePageModule:
angular.module('HomepageModule', ['toastr', 'compareTo']);
and then this is where it is used HomepageController:
angular.module('HomepageModule').controller('HomepageController', ['$scope', '$http', 'toastr', function($scope, $http, toastr){
$scope.loginForm = {
loading: false
}
$scope.submitLoginForm = function (){
// Set the loading state (i.e. show loading spinner)
$scope.loginForm.loading = true;
// Submit request to Sails.
$http.put('/login', {
email: $scope.loginForm.email,
password: $scope.loginForm.password
})
.then(function onSuccess (){
// Refresh the page now that we've been logged in.
window.location = '/';
})
.catch(function onError(sailsResponse) {
// Handle known error type(s).
// Invalid username / password combination.
if (sailsResponse.status === 400 || 404) {
toastr.error('Invalid email/password combination.', 'Error', {
closeButton: true
});
return;
}
toastr.error('An unexpected error occurred, please try again.', 'Error', {
closeButton: true
});
return;
})
.finally(function eitherWay(){
$scope.loginForm.loading = false;
});
};
}]);

There is toastr, which is a toastr JavaScript library and there AngularJS-Toaster, which is an AngularJS toastr library.
You should be using the latter but it seems that you are using the former.
To use the latter in AngularJS try the following (as per the documentation):
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});

Include First angular js and then its dependencies always to avoid this kind of errors
<script src="/bower_components/angular/angular.js"></script> in head tag
<script src="/bower_components/toastr/toastr.js"></script> anywhere after head tag
angular.module('HomepageModule', ['toaster', 'ngAnimate'])
.controller('HomepageController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});

<script src="/bower_components/angular/angular.js"></script> First
<script src="/bower_components/toastr/toastr.js"></script> Second
Do not forget adding dependency
angular.module('app', ['toastr'])

in my own case, i remembered to include my app.js script .

BlanketJS + Jasmine 2.0 not working

I have been testing with Jasmine 2.0.0 and it works without any problem.
But there's a problem when I append BlanketJS to my code.
I used a specRunner(https://github.com/alex-seville/blanket/blob/master/test/jasmine-requirejs/runner.html) that works with Jasmine 1.3.1. But It does not work when I replace Jasmine 1.3.1 with Jasmine 2.0.0,
Here's original code from BlanketJS repo:
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-html.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
<script type="text/javascript" src="../../node_modules/requirejs/require.js"></script>
<script type="text/javascript" data-cover-only="code/" data-cover-never="['all.tests','code/tests']"
src="../../dist/qunit/blanket.js"> </script>
<script type="text/javascript" src="../../src/adapters/jasmine-blanket.js"></script>
<script type="text/javascript">
if (window.require && typeof (window.require.config) === 'function') {
require.config({
baseUrl: './code'
});
}
</script>
<script type="text/javascript" src="code/all.tests.jasmine.js"></script>
<script type="text/javascript">
(function () {
window.blanketTestJasmineExpected=2;
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
var oldResult = htmlReporter.reportRunnerResults;
jasmineEnv.addReporter(htmlReporter);
/* this is just for our automated tests */
window.jasmine_phantom_reporter = new jasmine.ConsoleReporter;
jasmineEnv.addReporter(jasmine_phantom_reporter);
/* */
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
and I added Jasmine 2.0.0 files and changed this code like below:
....
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
....
The error messages printed:
Uncaught TypeError: Cannot read property 'env' of undefined jasmine-html.js:38
Uncaught TypeError: Object #<Env> has no method 'currentRunner' jasmine-blanket.js:76
How can I run this specRunner page without problems? Please give me a solution. thanks.

the Blanket adapter uses currentRunner but that doesn't exist in 2.0 anymore.
The Blanket Jasmine adapter needs to be updated as both this and the reporter interface has changed.
Open up your jasmine-blanket.js file and replace the code at the bottom with this:
BlanketReporter.prototype = {
specStarted: function(spec) {
blanket.onTestStart();
},
specDone: function(result) {
var passed = result.status === "passed" ? 1 : 0;
blanket.onTestDone(1,passed);
},
jasmineDone: function() {
blanket.onTestsDone();
},
log: function(str) {
var console = jasmine.getGlobal().console;
if (console && console.log) {
console.log(str);
}
}
};
// export public
jasmine.BlanketReporter = BlanketReporter;
//override existing jasmine execute
var originalJasmineExecute = jasmine.getEnv().execute;
jasmine.getEnv().execute = function(){ console.log("waiting for blanket..."); };
blanket.beforeStartTestRunner({
checkRequirejs:true,
callback:function(){
jasmine.getEnv().addReporter(new jasmine.BlanketReporter());
jasmine.getEnv().execute = originalJasmineExecute;
jasmine.getEnv().execute();
}
});
Then it will should as intended.
ETA - personally I'd switch to Istanbul instead, as Blanket seems to be sparsely updated (if at all) right now. Istanbul has more complete coverage stats (not just lines - branches, etc) and can export to lcov for tools like Code Climate. It works with Jasmine, or any test framework, flawlessly.

So now there is actually an adapter for 2.x version of jasmine. But I still had some trouble configuring it. Eventually I did configure everything right, so that is what I got:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="components/jasmine.css">
<script src="components/jasmine.js"></script>
<script src="components/jasmine-html.js"></script>
<script src="components/boot.js"></script>
<script type="text/javascript" data-cover-only="app/" src="components/blanket.js" data-cover-adapter="components/jasmine-2.x-blanket.js"></script>
<script src="components/blanket_browser.js"></script>
<script src="components/jasmine-2.x-blanket.js"></script>
<!-- sources -->
<script src="components/angular.js"></script>
<script src="components/angular-mocks.js"></script>
<script src="app/custom-forms.js"></script>
<script src="app/route-selector.js"></script>
<!-- tests -->
<script src="tests/custom-forms-tests.js"></script>
<script src="tests/route-selector-tests.js"></script>
</head>
<body>
</body>
</html>
Note: I used bower to retrieve jasmine and blanket, but there is some confusion towards what blanket files I had to reference, so:
"components/blanket.js" -> I got this file from dist/qunit/blanket.js
"components/blanket_browser.js" -> src/blanket_browser.js
"components/jasmine-2.x-blanket.js" -> src/adapters/jasmine-2.x-blanket.js
Note that I also use boot.js that comes with jasmine and it works fine. Hope this information helps someone.

Sammy.js tutorial; templates throwing errors?

I'm attempting to follow the Sammy.js tutorial they have on their documentation site, and when I attempt to render my template it throws me:
Uncaught SyntaxError: Unexpected token ) sammy.template-latest.min.js:5
in Chrome. And in Firefox:
[14:55:55.136] SyntaxError: missing ; before statement # mysitehere/workspace/scripts/vendor/sammy/plugins/sammy.template-latest.min.js:5
My application script is:
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.around(function(callback) {
var context = this;
this.load('data/items.json')
.then(function(items) {
context.items = items;
})
.then(callback);
});
this.get('#/', function(context) {
context.app.swap('');
$.each(this.items, function(i, item) {
context.render('templates/item.template', {id: i, item: item})
.appendTo(context.$element());
});
});
});
$(function() {
app.run('#/');
});
})(jQuery);
In markup, I've imported:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="scripts/vendor/sammy/sammy-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.template-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.json-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/application/application.js" type="text/javascript" charset="utf-8"></script>
All of which resolve as 200's.
My template path is verified and copied from their github repo.
I did hear that it's a possible Chrome issue for pulling data not on the http:// protocol but I also tried in FF to no avail either.
Any ideas?