Despite the fact that the approach with the parent component (passing data through attributes) is an ideal and reliable implementation , we can achieve the same thing in a simpler way using the factory repository.
In principle, the data is stored by Store , which are referenced in the area of ββboth components, which allows you to respond to user interface updates when the state changes.
Example:
angular .module('YourApp') // declare the "Store" or whatever name that make sense // for you to call it (Model, State, etc.) .factory('Store', () => { // hold a local copy of the state, setting its defaults const state = { data: { heroes: [], viewType: 'grid' } }; // expose basic getter and setter methods return { get() { return state.data; }, set(data) { Object.assign(state.data, data); }, }; });
Then in your components you should have something like:
angular .module('YourApp') .component('headerComponent', { // inject the Store dependency controller(Store) { // get the store reference and bind it to the scope: // now, every change made to the store data will // automatically update your component UI this.state = Store.get(); // ... your code }, template: ` <div ng-show="$ctrl.state.viewType === 'grid'">...</div> <div ng-show="$ctrl.state.viewType === 'row'">...</div> ... ` }) .component('mainComponent', { // same here, we need to inject the Store controller(Store) { // callback for the switch view button this.switchViewType = (type) => { // change the Store data: // no need to notify or anything Store.set({ viewType: type }); }; // ... your code }, template: ` <button ng-click="$ctrl.switchViewType('grid')">Switch to grid</button> <button ng-click="$ctrl.switchViewType('row')">Switch to row</button> ... `
If you want to see a working example, check this .png code .
For this, you can also enable communication between 2 or N components . You just need to:
- introduce storage dependency
- make sure you bind the storage data to the area of ββyour component.
as in the above example ( <header-component> ).
In the real world, a typical application needs to manage a lot of data, so it makes sense to logically separate data areas in some way. Following the same approach , you can add more store factories . For example, to manage the current registered user information and an external resource (i.e., the Catalog), you can build a UserStore plus a CatalogStore - alternatively UserModel and CatalogModel ; these organizations will also be good places to centralize things like communicating with internal content, adding custom business logic, etc. Data management will ultimately be the responsibility of the Store factories.
Keep in mind that we mutate storage data . Although this approach is dead simple and straightforward, it may not scale well because it will create side effects . If you want something more advanced (immutability, pure functions, a tree with one state, etc.), go to Redux , or if you finally want to go to Angular 2, look at ngrx / store .
Hope this helps! :)
You do not need to do this Angular 2, because just in case you sometimes migrated ... Do it if it makes sense for you to do it.