Angularjs component without module definition, components interaction - javascript

I'm a newbie to angularjs, trying to add some functionality to angularjs codebase
(angularjs 1.5 with angularjs material)
I don't see any module definitions angular.module in the components.
All components js files start with class nameController and end with an export export const namrComponent.
What is the proper way of adding a component in such a case?
I mean how do you tweak an example like this to fit in the codebase.
I tried creating a component under app folder and adding it to index.module.js but it doesn't seem to work.
I get errors saying The controller with the name 'nameOfMyComponent' is not registered
I'm also trying to put md-switch in one component (FirstComponent), and when its ng-change is fired I want another component (SecondComponent) to create md-dialog with md-list in it.
(SecondComponent) dialog will show a list of items with checkboxes, on hitting a submit button it will send the selected items to api; and return a success message to the (FirstComponent) to update the md-switch.
Is this flow possible? I mean the communication between components?
How to call one component from the other?

Related

Vue.js set data in other component without event

Currently I'm using Laravel Nova. Behind the scenes it's using vue.js. I've made a custom vue component that need's to change data within another component.
That other component lives in the node_modules directory so I can't change the component code. The component is not using events so I can't change the data with that.
I was wondering is it possible to change data within another component without using events?
I don't know the code of the component where you want to set the data.
But if it has a ref you can do something like:
updateData: function() {
this.$refs.xyComponent.clicked = true
}
Notice that the $refs are only populated after the render process.

Can Knockout components be registered by a dynamically generated <script>?

The motive is that I don't want to register all my components when the website is first visited by the browser. I want to be able to register components when a code needs it, and I don't want the JS file of the component to be loaded when the web page loads the very first time. Via Ajax, I want to load JS files containing component registration code.
Please, is this possible in Knockout?
If you want to load components in a different way than provided by Knockout's default loader (which uses ko.components.register), you should create a custom loader (docs). It seems that in your case, you'll just want to implement the getConfig method to return the configuration for a component.

Can't create new vue components

For some reason I can't register new components. I got a few of them and when I try to register new one I get:
Unknown custom element: <store> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
This is my app.js file:
Vue.component('example', require('./components/Example.vue'));
Vue.component('register', require('./components/Register.vue'));
Vue.component('loginmodal', require('./components/LoginModal.vue'));
Vue.component('products', require('./components/Products.vue'));
Vue.component('store', require('./components/Store.vue'));
And Store.vue is basically duplicated Example.vue so no point in posting that. I tried using already created components on page like register for example and it works just fine for some reason. You should also know that I'm using Laravel where Vue is pre-included and already set up by default with example component already created.
Here is my guess: you are using the component store in one of the other components listed above before registering it globally.
This could probably be adressed by changing your registering order, but I would advise you to register them locally to each component instead.
See: https://v2.vuejs.org/v2/guide/single-file-components.html

Reactjs component with changing views

I m actually developping an application using Fluxible and Reactjs.
I need to create inside of this app (already using a router) dynamic subroutes inside of a parent component.
In fact, my component is, globally a planning manager. We can see daily, weekly, monthly etc... tasks.
It means that I have multiple components that can be replaced by each other inside of a parent component which can be .
So I was wondering if we can use something like an "inside component router". I mean this router should work only inside of the concerned component, like changing only the inside components of the parent component Planning.
This looks like a job for react router: https://github.com/rackt/react-router.

Ember.js: How do I associate my component with a model?

I am new to Ember.js and am trying to figure out how to piece things together at this point. One component I built, since I need a re-usable "widget" to use across many portions of my application, is a "site nav" widget. Basically, it's almost like the buttons/links you see in StackOverflow when you open a new question titled: "Questions Tags Users Badges Unanswered". In my app, these links have a name and id associated with them on the server-side. I want to be able to use this navigation widget on multiple parts of my app and it should be as simple as putting:
{{site-nav}}
into a template. I got that part working just fine, but the navigation is currently hard coded in handlebars. My question is, for a component, where is the right place to retrieve/populate model data from the server? For a controller, we do it directly from the controller's route definition. The component is not associated with a router. In fact, it can be re-used, as mentioned before, in several parts of the app.
I want to be able to drop this component into templates and have it populated with modeled nav from the server which has the name/IDs of the navigation I need. Where is the best place to do this? I'm guessing I'll still extend from something like DS.Model, but I'm not entirely sure where/when/how to integrate this with the component. When do I create the model and invoke a .find() type call to the server to populate site-nav with data?
you can pass value to component Passing properties to component
via handlebars.
{{my-nav navlist=listfromserver}}
so the list from server is in our controller can be passed to the component

Categories