Just dipping my toes into the world of ngJS.
I've managed to successfully bind the service objects to controllers.
Is this the best way, or is there a more recommended approach?
I'm also curious why this functionality seems limited to objects and not properties.
Check out my fiddle for reference. Would love to hear some detailed explanations.
Thank you!
Take a look at this Stack Overflow discussion.
An interesting point to note is that a
variableis capable of holding either.primitive values or reference values
Primitive valuesare data stored in the stack.- The value of a
primitive valuegets directly stored where the variable points to.Reference valuesare essentially like objects and reside in the heap.- A
reference valuestored in a variable location acts as a pointer to the actual memory location where the object exists.- Examples of primitive types include
Undefined,Null,Boolean,Number, andString.Getting back to basics
In essence, objects consist of properties. A property can refer to an
objector aprimitive. It's noteworthy thatprimitives are simply valuesand don't have any properties on their own.When it comes to JavaScript, there are 5 main primitive datatypes: string, number, boolean, null, undefined. With the exception of null and undefined, all primitive values have corresponding object versions which encase the primitive values; for instance, a String object wraps around a string primitive. Above all else, primitives cannot be changed once set.
Essentially, you have connected scope properties to the view and initialized them with values from service properties in your code:
var myApp = angular.module('myApp', []);
myApp.service('s1', function() {
this.Input = {
name: 'John'
};
this.name = 'Doe';
});
myApp.controller('c1', function($scope, s1) {
$scope.Input = s1.Input;
$scope.name = s1.name;
});
myApp.controller('c2', function($scope, s1) {
$scope.Input = s1.Input;
$scope.name = s1.name;
$scope.change = function() {
console.log("s1.name = "+s1.name);
s1.name = "ciao";
console.log("s1.name = "+s1.name);
};
});
However, altering the value of $scope.name in the c2 controller does not affect s1.name, and changing s1.name via the $scope.change method in the c2 controller doesn't reflect on $scope.name.
One solution to propagate changes in service properties is by utilizing events - triggering events from the service and listening for them in the controllers. For more information, refer to How do I create a custom event in an AngularJs service.
Here is the updated jsfiddle link: http://jsfiddle.net/0j0mdjco/2/
I'm really trying to understand how all of this operates. It seems like it should be working as intended. I have an Auth factory that, when the jwt token expires, calls its 'delegate' method which obtains a new token using the refresh token. ...
Exploring the functionalities of Codeship and Heroku for continuous deployment of an AngularJS application I am currently developing has been quite the adventure. This app, built with Yeoman utilizing bower and grunt, seemed like a promising setup at first ...
I am attempting to create a component that will only be displayed after clicking on a search button. Below is the current code that I have: Update After making some changes, I am now encountering this error: Error: ERROR in /home/holborn/Documents/Work ...
As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...
Can Angular2 be integrated with AngularJS? For instance, is there a way to have a button in an AngularJS application that, when clicked, shows an Angular2 form? What would be the best approach for this scenario? Would it be better to host them on separat ...
I attempted to design a form that allows for multiple inserts, where users can add as many titles and languages as they desire by entering a number. The display of titles and languages is functioning correctly, but I am struggling to retrieve the individua ...
I've been working on adding parameter validation to my Node/Express API by utilizing express-validator. However, I encountered a situation where even though I sent a POST request with a missing "name" field using the curl command curl -X POST -d "foo= ...
I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...
Here is the code snippet I'm currently working with: useEffect(() => { if (field[1].isActive === true) { handleMore(); } }, [field[1].text]); One issue I'm encountering is that sometimes the Field data does not come in the json-response, ...
I am seeking the most effective method to accomplish the following task: $("#some-image").fadeOut(); $("#some-image").attr("src", "new-src.png"); $("#some-image").fadeIn(); For timing purposes, the code below is a step closer, but it still needs improvem ...
I have been struggling to set a cookie from my express backend using a React frontend. The cookie shows up in the response header, but for some reason, the browser refuses to set it. I've tested this on Chromium and Firefox, with no success. Interesti ...
I'm facing a simple issue that I'm struggling to solve. I have two functions and an object in JavaScript (Node.js) structured like this: var auxmap = new Map(); function one() { for(var i...) { //initialize the map and do something tw ...
In this scenario, I am looking to utilize mongoose. Consider a Schema structured like the following: const userSchema = new Schema({ name: { first: { type: String, required: true }, last: { type: String, required: true }, }, email: { type: S ...
// The Custom Input component const Box = styled.div``; const InputBox = styled.div<{ width: string }>` display: flex; width: ${(props) => props.width}; height: 42px; justify-content: space-between; align-items: center; padding: 9px ...
I have a function that is triggered from three different pages. Each page involves adding an attribute to a specific div. For instance: <div id="posts" page="home"></div> <div id="posts" page="feed"></div> <div id="posts" page= ...
My application utilizes the Google Drawing Library. When a user clicks on the Add New Marker Button, the Drawing Manager is activated allowing the user to generate a marker by clicking anywhere on the map. Subsequently, the following listener is executed: ...
Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...
One question I have is related to routing in Vue.js: // routes.js { path: '/posts', name: 'Posts', component: PostsView }, { path: '/post/:post_id', name: 'PostRead', component: PostReadView, }, { pat ...
Whenever I attempt to include a string containing "& (amp)" within the .html() function, it results in an unrecognized expression error. Can you advise me on how to convert the & string or suggest the best method for inserting the desired strin ...
A situation has arisen where the timezone offset on my local server is being duplicated by the server while creating a new event in my app. For every event created by a user, the client-side scripting computes and adds the time zone offset to the input be ...