I'm reading the component page of angular docs, and there is a note:
An application is a tree of components: Ideally, the whole application should be a tree of components that implement clearly defined inputs and outputs, and minimize two-way data binding. That way, it's easier to predict when data changes and what the state of a component is.
My question is:
In an application that have the architecture Component > Controller > Model > Service, should the Controller be a Component or just be a Controller?
in angular 1.x a component is a combination of a directive+controller+template, if you are using a router, like ng-route or ui-router, you cant avoid using a controller. angular 2 is difffernet in this case but thats a whole other story.
Related
I have used react and angular before but this is my first time using angular js.
I have spotted that you can render in html components similar to react and angular.
For instance the code I am trying to upgrade
<div ng-if="!userSubscription.compliance">
<user-premise-groups-selector premise-groups="premiseGroups"
select-or-deselect-premises="selectOrDeselectPremises(currentEvent, currentPremiseGroupId)"
select-or-deselect-all-premises="selectOrDeselectAllPremises(currentEvent)"
all-premise-groups-selected="allCompliancePremiseGroupsSelectedLocal()"
is-user-premise-group="isUserPremiseGroup(currentPremiseGroupId)">
</user-premise-groups-selector>
</div>
I am trying to access this component like you can in angular or react (looks as if the data is passed down similar to props in reactjs) but am unsure of how to do this. Do these components work similar to other front end libraries such as react and angular? And how do I jump into these so that I can change the outdated code.
Within components folder this component does not exist however.
These are called directives in angular as components are slightly diffrent
I'm using a hybrid AngularJS/Angular application and my use case is I want to click a button, which is in my AngularJS code, that will trigger a mat-dialog component that I've written (which also works with other Angular components). My question is how can i get this mat-dialog component to trigger from AngularJS.
I've tried playing around using $mdDialog.show({}) with various properties such as trying to point it to the template of the mat-dialog component and trying to pass in my scope variables that the Angular component needs access to but with no such luck
I figured out that I can solve this problem by adding another #Input() to another Angular component that is already using my mat-dialog component. Then make sure that this angular component is implementing onChanges to watch for changes to the input variable. When changes are detected then I can trigger a method to kick off the mat-dialog.
I am using angular 1.5 component router. I need to be able to change the title shown on the browser tab whenever there is a route change.
I have gone through the component router docs and googled it to many a websites but without any luck. The only way I can see to do it, is using vanilla JS inside each component's $onInit method.
I am looking out for an angular way of doing it and setting all the titles in one place. Please help.
Is there a reload/refresh or like the Angular 2 version a renavigate method for the now deprecated (but much too late for the current project already built on it) component router for AngularJS 1.5?
Currently in order to destroy the route components and reload them I had to create a dumby route at the same level that I switch to and then back in order to force the components to be destroyed and then be rebuilt due to the view being composed of dynamic form fields.
I'd also be interested in any other suggestions if no API call exists to refresh a route.
The answer was to use $routerCanReuse and explicitly return false (since we don't have any other logic to apply), which when you reroute to the same route will now destroy and recreate the components allow for the dynamic forms to be re-rendered.
I am creating component based Angular app using Angular version 1.5.5 and typescript. In the header component I have country dropdown. That header component is re-used in multiple pages. Once the country is selected from the dropdown that particular scope lies only for that page, once I navigate to other page its got lost.
Is there any better way to reuse the component based on my scenario?
Few suggestions,
You can make use of $rootScope since its globally available, keep the country in $rootScope so that once you changed the model it will be available in the other pages as well
I don't know whether its suits your situation, If you are using angular routing keep the header component outside ng-view so that it will not change will navigating through different pages.