AngularJS: Why people prefer factory to share data between controllers - JavaScript Discussion Boards

First Prev Next

Re: JavaScript or TypeScript: which one to really dig into?

Foothill17-Jul-17 8:51

Foothill

17-Jul-17 8:51

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

Re: JavaScript or TypeScript: which one to really dig into?

Leng Vang24-Jul-17 6:44

Leng Vang

24-Jul-17 6:44

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.

Re: JavaScript or TypeScript: which one to really dig into?

Anjali Kapoor1-Aug-17 1:50

Anjali Kapoor

1-Aug-17 1:50

Java is to JavaScript as Ham is to Hamster

modified 2-Aug-17 8:02am.

AngularJS: How to prove that service and factory is singleton

Mou_kol12-Jun-17 22:29

Mou_kol

12-Jun-17 22:29

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

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

Re: AngularJS: How to prove that service and factory is singleton

Afzaal Ahmad Zeeshan12-Jun-17 22:55

Afzaal Ahmad Zeeshan

12-Jun-17 22:55

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 !~

Re: AngularJS: How to prove that service and factory is singleton

Mou_kol15-Jun-17 2:53

Mou_kol

15-Jun-17 2:53

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

<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

<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)
    };
});

How do I define constructor in service and factory in Angular?

Mou_kol12-Jun-17 3:37

Mou_kol

12-Jun-17 3:37

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 ?

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
});

AngularJS: Why people prefer factory to share data between controllers

Mou_kol12-Jun-17 3:36

Mou_kol

12-Jun-17 3:36

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

<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

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.

Re: AngularJS: Why people prefer factory to share data between controllers

onelopez12-Jun-17 5:41

onelopez

12-Jun-17 5:41

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

How to write the handler for buttons using JQUERY

Alex Can Work2-Jun-17 7:20

Alex Can Work

2-Jun-17 7:20

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;
}

Re: How to write the handler for buttons using JQUERY

ZurdoDev13-Jun-17 1:35

ZurdoDev

13-Jun-17 1:35

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.

Re: How to write the handler for buttons using JQUERY

John C Rayan19-Jun-17 3:51

John C Rayan

19-Jun-17 3:51

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 (.....

Re: How to write the handler for buttons using JQUERY

Member 1069738612-Sep-17 1:10

Member 10697386

12-Sep-17 1:10

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

IT developer for a bank needs opinions about my Javascript for online banking OTP

ArtCollector31-May-17 7:31

ArtCollector

31-May-17 7:31

[DELETED]

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

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

OriginalGriff31-May-17 7:37

OriginalGriff

31-May-17 7:37

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...

Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

F-ES Sitecore31-May-17 22:25

F-ES Sitecore

31-May-17 22:25

Did the code let you know which bank it was for? Need to know where never to put my money....

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

OriginalGriff31-May-17 22:48

OriginalGriff

31-May-17 22:48

And again...

Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

F-ES Sitecore31-May-17 22:27

F-ES Sitecore

31-May-17 22:27

ArtCollector wrote:
How could a hacker's job be a lot easier just because he can access the source code?

The fact that you work for a bank is scary. I wouldn't let you program my VCR.

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

OriginalGriff31-May-17 22:48

OriginalGriff

31-May-17 22:48

Down vote countered.

Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

OriginalGriff31-May-17 22:48

OriginalGriff

31-May-17 22:48

Clearly, you have no idea about security...

Do you think that "not mentioning the bank" and then publicly publishing it's intellectual property anyway is going to be a good defence when higher ups find out? Suppose you wrote a game, and shortly before you released it to iTunes or Google Play I took a copy of your complete source and posted it on facebook. Would you be a happy bunny? Same thing.

And if you don't know how access to source code make it easier for people to work out ways round then frankly, I wouldn't let you program my calculator ...

It's worrying that someone so naive can be working on security systems to deal with real money: if my bank suddenly introduces a one-time-pin system in the next couple of months I'll be changing banks just in case it's some of your code. Unsure | :~

Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

Richard Deeming31-May-17 8:24

Richard Deeming

31-May-17 8:24

ArtCollector wrote:
I must make sure that the OTP generation process is secure, "impossible" to bypass

Which rules out doing it on the client, then.

Unless you're using Node.js on the server, Javascript is not the way to go.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

Richard MacCutchan31-May-17 22:35

Richard MacCutchan

31-May-17 22:35

Stick to art collecting, you obviously do not have the first idea about banking security. But do let us know which bank it is as we all need some extra money.

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

OriginalGriff31-May-17 22:49

OriginalGriff

31-May-17 22:49

Down vote countered - he clearly doesn't like the truth...

Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP

Richard MacCutchan1-Jun-17 1:01

Richard MacCutchan

1-Jun-17 1:01

John 18:38.

Re: IT developer for a bank needs opinions about my Javascript for online banking OTP