Re: AngularJS: How to prove that service and factory is singleton - JavaScript Discussion Boards

I am beginning to believe that I will be better off just biting the bullet and learning more JavaScript. Any good resources to learn some of the intermidiate to advanced topics? I've got the internet (ecma-international.org, w3.org, w3schools.com) that have gotten me a good start as well as a book on JavaScript and JQuery. What I am looking for is a resource that tells me all the things I can do with JavaScript and a few pointers to get me started. So far, I'm learning how to manipulate the DOM and using XMLHttpRequest to do a little async processing from an MVC/WebApi test site that I built. Obviously, there's a lot you can do with it but nothing I can find paints a good road map on what subjects to focus on and in what order.

if (Object.DividedByZero == true) { Universe.Implode(); }
Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016

First read you should go for is JavaScript: The Good Parts[^]
Than these too: Douglas Crockford's Javascript[^]
This is good also: Build A JavaScript Framework[^]
And this too: Prototype in JavaScript | Sander's bits[^]
And not to be afraid to pick and use a library - of you choice - intensively to easy you work...

Skipper: We'll fix it.
Alex: Fix it? How you gonna fix this?
Skipper: Grit, spit and a whole lotta duct tape.

Thanks. This should help a bit. Before I start relying on libraries I want to know how they work.

if (Object.DividedByZero == true) { Universe.Implode(); }
Meus ratio ex fortis machina. Simplicitatis de formae ac munus. -Foothill, 2016

The question is how deep a rabbit hole you are planning to follow. If your intention is to learn enough to do a project and will not become full time web developer, then TypeScript is probably easier. If you want to switch from being SysAdmin into a developer then I would suggest biting the bullet and get to know JS. I personally know JS then learn TS, then gone back to stick with JS. TS to JS is like C/C++ to Assembler.

Java is to JavaScript as Ham is to Hamster

modified 2-Aug-17 8:02am.

i search a lot for example which i can run and see that angular service and factory is singleton in nature because i heard many time that these are singleton in nature when i read many write up on difference between service and factory but none one show this that these are singleton with example and code.

i am new in angular. so very curious to know how could i write a program which tell me that service and factory is singleton. if possible please provide a example.
sample service and factory

C#

var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});

thanks

A singleton object, would expose a public function through which you will access the internal instance of that type. It will hide all sort of constructors etc. from the outside world (either through private constructor or other means).

Thus, to test if this is the case, you can see the internal implementation, and try to access the type multiple times. If they are same, then it is singleton. Singleton doesn't prohibit the object from being called multiple times, or being attached to multiple types or services. The only thing to note here, is that the object must have only one instance.

Are Angularjs services singleton? - Stack Overflow
Services

You can read more in the link above, it states that the services are singleton, meaning all the objects and components get access to the reference of the single object instance on the runtime.

To know the details of how that gets implemented, you might want to study the code, or try to store different variables, attach components and then see where they are attached. In a singleton they will target the same parent.

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

thanks for your link. few days back i could simulate the same with a example which i like to share here.

i being able to create a small program which can tell me the factory is singleton. so here is the program code

C#

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : {{data.firstName}}
  <button ng-click="setData()">setData</button>
</div>
<hr>

<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.FirstName='Tridip';
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

i being able to create a small program which can tell me the service is also singleton. so here is the program code

C#

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : {{data.firstName}}
  <button ng-click="setData()">setData</button>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);
myApp.service('Data',function(){

  var FirstName='';
  this.setData=function(FirstName){        
       this.FirstName=FirstName;
  };

  this.getData=function(){
    return FirstName;
  };

});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.setData('Mama');
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    //$scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

i am little bit familiar with angular. still on learning process. working with ng version 1.4.8. so i like to know how could i define constructor function in service and factory.

here is one sample service .now tell me how to define constructor in service or factory ?

C#

angular.module('myApp').service('helloService',function($timeout){
  this.sayHello=function(name){
    $timeout(function(){
      alert('Hello '+name);
    },2000);
  }
});

angular.module('myApp').controller('TestController',
  function(helloService){
  helloService.sayHello('AngularJS'); // Alerts Hello AngularJS
});

i am new in angular. so trying to know how to share data between two controller and search google. i visited few pages and found most of the time people use factory to share data. i just like to know can't we do it by service instead of factory ?
1st example

C#

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : {{data.firstName}}
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

2nd example

C#

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

examples are taken from this url https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers

please guide me.

This SO should explain it rather well,
https://stackoverflow.com/a/21900284

Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties.

in case of links this code JQuery works fine:

JavaScript

$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){    // Event of link-click  "necxt step"
if (current_step == steps.length-2) { // checking -  will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});

$("a.back").click(function(){    // Click event on a small window

if (current_step == 1) { // checking -  will it the next step is last
$(this).hide(); // hide the link "back"
}

$("form input[type=submit]").hide(); // hide the button "OK"

$("a.next").show(); //hide the link "Next step"

current_step--; // increase the counter of the current slide

changeStep(current_step);// change a step

});

function changeStep(i) { // the function of step changing 

$(steps).hide(); // hide all steps

$(steps[i]).show(); // show the current

}

});

But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back"

My HTML-code

HTML

<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" >
<HEAD>
<META name="viewport" content="width=device-width charset=UTF-8" HTTP-EQUIV="Content-Type"/>   
<LINK rel="stylesheet" href="templates.css" type="text/css"/>
<SCRIPT type="text/javascript" src="jquery-3.2.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="steps_registration.js"></SCRIPT>
<TITLE>Page</TITLE>
</HEAD>

<BODY>
<FORM method="get" action="send.php">
<DIV class="step">
<P class="step">step 1</P>
<P>Name:<INPUT type="text" name="login" placeholder="Login"></P>
</DIV>
<DIV class="step">
<P class="step">step 2</P>
<P>Sourname:<INPUT type="text" name="sname" placeholder="Input sourname"></P>
</DIV>
<DIV class="step">
<P class="step">step 3</P>
<P>E-mail:<INPUT type="text" name="mail" placeholder="Input e-mail"></P>
</DIV>
<P class="talign">
<INPUT type="button" onClick="history.back();" value="Back" name="1">
<INPUT type="button" onClick="history.forward();" value="Next" name="2">
<a href="#" class="back">Back</A>
<a href="#" class="next">Next</A>
<INPUT type="submit" value="OK">
</P>
</FORM>
</BODY>
</HTML>

My CSS

CSS

body {
margin:0;
}
/* Общие стили закончилась */

form {
width:30%;
margin:0 auto;
}

form div.step {
display:none;
}

form div.step p.step{
text-align:center;
font-size:28px;
}

form div.step p{
}

form div.step p input{
float:right;
}


a.back {
display:none;
}

form input[type=submit] {
display:none;
}

a {
color:#006600;
text-decoration:none;
}

form p.talign{
text-align:center;
}

I do not understand what you are asking.

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

If you want to use button in place of link , then you have to use id of the button and use .click handler.

For instance, you have a button like this

HTML

<button id='btnNext'>Next</button>

then your click handler could be

$('#btnNext').click (.....

you want to use your input button in place of link , then you can use id of the input button and use .click handler.
Use HTML instance

HTML

<INPUT type="button" onClick="history.forward();" value="Next" name="2">

of this

HTML

<input type="button" id="btnNext" value="Next" name="2">

and Script

JavaScript

$("#btnNext").click(function () {    // Event of link-click  "necxt step"
                if (current_step == steps.length - 2) { // checking -  will it the next step is last
                    $(this).hide(); // i hide the link "next step"
                    $("form input[type=submit]").show(); // show thge button "OK"
                }
                $("a.back").show(); // show the link "Back"
                current_step++; // increase the counter of the current slide
                changeStep(current_step); // change a step
            });

do same as it is for another button

[DELETED]

-- modified 1-Jun-17 5:06am.

ArtCollector wrote:
I must make sure that the OTP generation process is secure, "impossible" to bypass and free of any bugs or loopholes.

Do you think it's a really good idea to publish secure code on a public website and ask people to comment on problems?

You do realize that access to the source code makes hackers jobs a whole load easier?

I've deleted the link, and I'd strongly suggest that you delete it from the remote end as well before your IT security department notice it and rightly come down on you like a ton of bricks...