I want to use this method (which ouputs a message if a user is typing) with a service. the method is updating a info varible (set its text to "typing" or blank).
I thought about using this method as a service to my angular model. the problem is that this method needs access to the text varible {{info}} with sits inside the view (some html).
How can I do that?
my code is below....
Thanks
js file
mymodule.controller("cntrlChat", ['$scope','isUserTypingService',
function($scope,isUserTypingService){
$scope.isUserTyping=function(){
isUserTypingService($scope.info);
}
}]);
mymodule.factory('isUserTypingService',['$q','$timeout', function($q,$timeout) {
var isUserTyping= function(info) {
runTwoFunctionWithSleepBetweenThem(function (){info='user is typing...';},function (){info='';},3500);
};
var runTwoFunctionWithSleepBetweenThem=function(foo1, foo2, time) {
$q.when(foo1()).then(() => $timeout(foo2, time));
}
return isUserTyping;
}]);
index.html
<html>
<head>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<div ng-app="mymodule" ng-view>
</div>
</html>
chat.html
{{info}}
you could do something like this:
<input ng-model="userInput" ng-change="runWhenTyping()" />
in your controller:
$scope.userInput = '';
$scope.runWhenTyping = function () { isUserTypingService($scope.userInput) }
Each time they type runWhenTyping will be called and in turn it will call your service.
Related
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.
I'm working with Jasmine to do tests on my angular app.
I'm am trying to test a function called calculateAverageAge which is defined in an angular factory called sharedFactory and it is telling me that sharedFactory is undefined.
ReferenceError: sharedFactory is not defined
I've included all the src files. Is there anything I'm missing?
Note: it's working in the actual app but not in the spec. Thanks
Jasmine suite
describe("SharedFactory", function () {
it("should calcuate the average age from an array of ages", function () {
var ageArray = [1,6,9,23,33,62,63,4,5];
var averageAge = sharedFactory.calculateAverageAge(ageArray);
expect(averageAge).not.toBeLessThan(1);
expect(averageAge).not.toBeGreaterThan(120);
});
});
SharedFactory.js
agesApp.factory('sharedFactory', function($http, loginFactory) {
return {
calculateAverageAge: function(ageArray){
var sumOfAges = 0;
var numberofAges = ageArray.length;
ageArray.forEach(function(age) {
sumOfAges += age;
});
var averageAge = sumOfAges/numberofAges;
return averageAge;
}
};
});
SpecRunner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.6.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.6.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.6.1/jasmine.css">
<script src="lib/jasmine-2.6.1/jasmine.js"></script>
<script src="lib/jasmine-2.6.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.6.1/boot.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/angular-touch.min.js"></script>
<!-- include source files here... -->
<script src="../modules/agesApp.js"></script>
<script src="../factories/loginFactory.js"></script>
<script src="../factories/sharedFactory.js"></script>
<!-- include spec files here... -->
<script src="spec/SharedFactorySpec.js"></script>
</head>
<body>
</body>
</html>
See the code here: http://plnkr.co/edit/xIRiq10PSYRsvNE0YWx7?p=preview.
I'm getting the following 2 errors.
Route must provide either a path or regex property
[$compile:ctreq]
http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngOutlet&p1=ngOutlet
index.html
<!DOCTYPE html>
<html ng-app="favMoviesList">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js</script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="module.js"></script>
<script src="movies-list-component.js"></script>
<script src="movie-rating-component.js"></script>
<script src="movie-app-component.js"></script>
</head>
<body>
<movie-app></movie-app>
</body>
</html>
module.js
(function(){
var module = angular.module("favMoviesList",["ngComponentRouter"]);
module.value("$routerRootComponent","movieApp");
module.component("appAbout",{
template:"This is about page"
});
}());
movie-app-component.js
(function(){
var module = angular.module("favMoviesList");
module.component("movieApp",{
templateUrl:"movie-app-component.html",
$routeConfig:[
{ path:"/list",component:"movieList",name:"List"},
{ path:"/about",component:"appAbout",name:"About"},
{ paht:"/**", redirectTo:["List"] }]
});
}());
You made a typo: paht should be path.
The second error is because your controller 'ngOutlet', required by directive 'ngOutlet', can't be found.
I'm trying to get route parsing for $routeProvider to generate .when()'s from array. Here is the code in app.js that I've tried. This generates correct routes, but causes infinite loops of "Tried to load AngularJS more than once". I only load angularjs in the index. html file, into which the view is rendered. How can I get routes from array to work? Array structure is "route":"fileName.html".
var dynape = angular.module("dynape",['ngRoute','dynape.controllers','dynape.services','ngCookies']);
dynape.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
var db = new PouchDB('http://localhost:5984/siteconf', {skipSetup: true});
db.get("pages").then(function(doc) {
var tmp = doc;
delete tmp["_id"];
delete tmp["_rev"];
delete tmp["/"];
for(p in tmp) {
console.log(p.toString());
$routeProvider.when(p.toString(), {
controller: "SiteController",
templateUrl: "views/pages/"+tmp[p]
});
}
});
// Follwing routes never change
$routeProvider.when("/",{
controller: 'SiteController',
templateUrl: "views/frontPage.html"
}).when("/admin",{
controller: 'AdminLoginController',
templateUrl: "views/admin/login.html"
}).when("/admin/setup", {
controller: 'SetupController',
templateUrl: "views/admin/setup.html"
}).when("/admin/dashboard", {
controller: 'AdminActionController',
templateUrl: "views/admin/dashboard.html"
}).when("/admin/pages", {
controller: 'AdminActionController',
templateUrl: "views/admin/pages.html"
}).otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
}
]);
angular.module("dynape.controllers",[]);
angular.module("dynape.services",[]);
The index.html into which I render the view:
<!DOCTYPE html>
<html ng-app="dynape">
<head>
<base href="/">
<meta charset="utf-8">
<title>A Dynape Site</title>
<link rel="stylesheet" href="/css/base.css" media="screen">
<link rel="stylesheet" href="/css/components-base.css" media="screen">
<link rel="stylesheet" href="/css/gridsys.css" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrap" ng-view>
</div>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script type="text/javascript" src="src/vendor/jquery.js"></script>
<script type="text/javascript" src="src/vendor/pouchdb.min.js"></script>
<script type="text/javascript" src="src/vendor/image-picker.min.js"> </script>
<script type="text/javascript" src="src/vendor/angular.min.js"></script>
<script type="text/javascript" src="src/vendor/angular.route.min.js"></script>
<script type="text/javascript" src="src/vendor/angular-cookies.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/services/AuthenticationService.js"></script>
<script type="text/javascript" src="src/controllers/AdminLoginController.js"></script>
<script type="text/javascript" src="src/controllers/AdminActionController.js"></script>
<script type="text/javascript" src="src/controllers/SetupController.js"></script>
<script type="text/javascript" src="src/controllers/SiteController.js"></script>
</body>
</html>
You can't access $routeProvider outside of .config
My guess would be that db.get is a call to your server which runs async. Then, by the time that call comes back, the routeProvider is already registered.
In other words, your code is being executed in the following order:
Create app (groovy)
Call CONFIG with $routeProvider (swell)
Call db.get(<callback>) (fine)
Manually setup $routeProvider.when with 6 specific routes (awesome)
.... Now, angularJs has been bootstrapped ...
db.get returns from the server and calls <callback> (uh-oh)
Attempting to access/change $routeProvider with new 'dynamic' routes (oops)
2 Potential Solutions:
A. bootstrap/config angularJs AFTER the db.get() returns. Never tried this ... I guess it could work, but seems risky.
B. DEFER route configuration using a decorator. there is an excellent blog post on this topic which seems to do what you want to do.
It would mean that all your dynamic routes would need the same "root" (eg - they all follow the format "/other/:route*"), but that's the only restriction.
I'd go with option B. Seems like a good plan!
I'm trying to learn Angular.js. I set up a simple page, in which I want to display a message from my script file. Here's the HTML structure:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
And this is my script.js:
var MainController = function($scope){
$scope.message = "my message";
};
I'm supposed to see the words my message on the page, but instead I'm seeing literally {{message}}. I tried to wrap the JS code in self-envoking function:
(function() {
var MainController = function($scope) {
$scope.message = "my message";
};
}());
But it didn't have any result.
What am I doing wrong?
It's old syntax and you cannot declare controller like that. Now you need to register controller on your module.
angular.module('anyModuleName',[]).controller('yourControllerName',function(){
});
and also edit to ng-app="anyModuleName" where you initialize your app. In your case <html ng-app="anyModuleName">