I am new to Angular and am trying to understand the order it processes a files applications.
So, from my understanding of the order:
1- main.ts is processed and, and the bootstrap method belonging to the platform that is imported accepts the root module file as an argument.
2- app.module.ts is processed which will import all of the necessary packages and application files required for the application. Here is also where all of the different components and directives and what not of the application are declared for use in the application, and where the applications root component is bootstrapped leading to the component tree model being rendered from the top down.
3 - This is where I am struggling to fully understand whats happening.
So beginning with the root component being rendered, Angular will follow the parent child path down the tree of the root components child components and render them in order?
So, say after the AppComponent declaration comes the BookItemComponent followed by the BookItemList component and lastly a directive called FavoriteDirective.
So AppComponent is started and renders the parent custom DOM element in the body of the applications markup.
Then, nested within this comes the BookItemComponent which creates another custom DOM element called . In this components class we have an input selector called bookItem.
Then, nested within this comes the BookItemList component, which contains an array of book items called bookItems.
Finally, the FavoriteDirective which just handles some simple host binding to create a class for the host element.
So my question in a nutshell -
Say the BookItemComponent is rendered but it has some bindings within its markup that is dependent on code from the BookItemListComponents class or the FavoriteDirectives class.
Would Angular skip ahead of BookItem and look at those files? Or would Angular pause its processing of the BookItemComponent class, skip ahead and look for a data match for the item it cant interpret yet? Or maybe stop and iterate to the next component and move forward in order and once it finds the data it needed for the items it couldn't interpret yet then return to fill in the gaps?
I am finding it hard to follow the path of rendering when I see this happen. Maybe I am just thinking about it incorrectly?
Not sure what you mean with "find the data". Binding are explicit where to look for data. If a field a binding refers to doesn't have data yet, then it either throws if this makes the expression invalid like {{person.name}} when person is null (you can work around using {{person?.name}} to avoid an exception). Otherwise Angular will "find" the data after it becomes available and change detection is run.
Related
I have a question that has been going through my mind for a while now. Should every component created be reusable??
Let's suppose that we have some html,css and javascript that can't get reused. For example a CRUD table for a specific product ( for example CRUD of users ) that gets updated through methods and watchers and other stuff. It could be created as a component called UsersTable but then that component can't get reused since it has the methods relative to users management through DB.
So for example, should that component be declared as plain html/css and js inside the parent or should it be declared as a component and emit events in order to communicate with its parent?
I am building the clone of a website/app called Kualitee.com. It is a test-management tool used by QA Engineers.
In kualitee, you have multiple projects, with test cases and members. You can add, delete, and change projects and members. There is a header on top which enables you to select a project of which you want the data of i.e test cases and stuff.
the header for changing projects
The approach I used for this is as follow:
1. one service containing all the data
2. one service containing only the project selected...
The whole app uses the data found in the second service. When I make a change in a project, say add a new member, it does display that at that time. After that, if I change the project in the select at the top to another project, the component containing that member does not change, even though the project is a different one now, but as soon as I switch to another component, through routing, and back again, the changes are there.
My point is, is there any way I can add functionality where, if a parent component changes an object in service, the change reflects in a child component also using that same object in that same service, without me needing to change components or refresh.
PS. This is my first time asking something on StackOverflow, Sorry if my question is confusing.
You probably need an observable shared service to share the data between components. Here is how to achieve that: Interaction between components using a service
I think you are referred to Angular life cycle https://angular.io/guide/lifecycle-hooks
I'm gonna try to not make this too long and just shoot some questions which have been bothering me for some time:
If a view is displaying 2 different children components based on the
URL via a router, should those components be in the components or
views directory?
Should components names be capitalized like this - Participant.vue
or participant.vue?
Are single word components like Participant.vue okay to use? If not,
how should I name a component that renders information about a
participant of a match.
If I want the component to use multiple words, what naming
convention am I meant to use? ParticipantMatches.vue,
participantMatches.vue, participant-matches.vue or
Participant-Matches.vue?
If my components have some sort of hierarchy, would it be stupid to
append the parent component name to the start of the child component
so that related components stay grouped up in the IDE file tree?
For example:
Participant.vue - Parent component
ParticipantMatches.vue - Child component of Participant.vue
ParticipantMatchesStats.vue - Child component of ParticipantMatches.vue
The only problem I see is that component names might potentially become too big.
If a view is displaying 2 different children components based on the
URL via a router, should those components be in the components or
views directory?
There is not a real definition for this so it's up to you, certainly in a SPA, as it is only one page. For me personally I use place the the "views" that can be accessed via a route under views everything rendered on that view I place in components
Should components names be capitalized like this - Participant.vue or
participant.vue?
Vue recommends (as suggested early) https://v2.vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended
Are single word components like Participant.vue okay to use? If not,
how should I name a component that renders information about a
participant of a match.
Participant.vue is basically OK, but again it's all up to you. When you have multiple component handling data of participants you could think of adding more information in the name of the component
If I want the component to use multiple words, what naming convention
am I meant to use? ParticipantMatches.vue, participantMatches.vue,
participant-matches.vue or Participant-Matches.vue?
When using a component directly in the DOM (as opposed to in a string template or single-file component), we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.
If my components have some sort of hierarchy, would it be stupid to
append the parent component name to the start of the child component
so that related components stay grouped up in the IDE file tree?
Place the components that belong to each other in a directory, I should not use the parent name in the component itself, If you want to reuse the component somewhere else in the future, the name doesn't make sense anymore.
I have a little question about Angular Components.
I often read that you should use components only to display data and interact with the user, and for your "business logic" you should prefer services.
So my question is the following (just an example):
Let's say I have made a component to upload files via drag and drop. I have the logic to get the data from the drag and drop and store it in an array (and maybe much more other functions) inside that components typescript file.
Now when I am including this component twice inside one parent component (because I need two upload fields for example), are both referencing to the same or is also the program logic inside that component created twice for each instance?
If so, then I should try to keep as much shared program logic as possible in singleton services so they are only created once at runtime and not wasting memory etc., shouldn't I?
Hope somebody understands what I am meaning :).
thanks in advance!
If you add the component twice into your parent, then two different instances will be created (each owning unique scope).
You should however abstract upload/handling logic into a service. Provide that service in module to make it a singleton. If you want instance per component, then provide it inside component.
If you create two components in your template which are similar for example:
<app cumstom></app custom>
<app cumstom></app custom>
This will result in two objects being created who both have their own model (data) and view. They don't know anything of each other.
If you want them to communicate it is often smart to use a service which you can inject into both components so they can share the same data. If a service is provided in your ngmodule is will only be created once (so it is a singleton).
Well I think what you need is a smart component, where you can put your boths uploads-component and inject your service logic in this smart component. The smart component will be responsible to provide the bridge of the common logic between the two components.
I've been learning Ember over the past few months, and with the beta release of 2.0 I've working on following the "data down, actions up" structure with my components. Unfortunately, this means actions are getting thrown all over the place and it's not very appealing to define them in every component and every template, only to be like, "yes, keep bubbling this up to the controller please". Is there any way to pass actions in groups or nest them so that in my handlebars templates I can just use something like {{my-component myActionGroup=myActionGroup}} and then unpack them within the component definition? Or maybe a setting to tell ember to allow component actions to bubble?
The component I'm working on right now is for nested sets, so I'm ending up with really deeply nested components. Keeping them all straight is pretty awful and doesn't seem very DRY to me since changing the name of one requires changing the associated one in close to ten other files. I know I could just reroute one to another in the handlebars template but then they become a mangled tangled mess. Are there any other options? Thanks!