mercredi 22 mars 2017

Methods for normalizing views in AngularJS + ui-router

My AngularJS site has a Browse and Search feature for 2 completely different types of models. Meaning, you can Browse/Search under ModelA which means when the results return to the screen I see a list of DOM elements rending ModelA. You can also Browse/Search under ModelB which also means that results render DOM elements of ModelB.

I would say 95% of the UX needed to support Browse/Search features across both Models is common code. Meaning the inputs, buttons, labels, etc are all pretty much the same.

I can think of a few ways to solve this.

1) Worst - have duplicate everything. Have 2 search pages, 2 browse pages and 2 results pages. This duplicates all the buttons, labels, inputs etc which makes it not very good.

2) Better - We have separate controllers, but shared views. Meaning there is a SearchModelAController and a SearchModelBController. This allows us to have a single view (no duplicate HTML), but we can differentiate at the controller level meaning the 1 view file might have a getModelType() method that returns either ModelA or ModelB. Then in the SearchModelAController we have this function and it just returns "ModelA". Then SearchModelBController would have the exact same method, but it would return "ModelB". Then when it comes to displaying the correct Model type in the results list, we would just have a amIModelA() type boolean method that we could change the view using ng-if to display the right view model.

3) Best - a combination of the 2. This is where I am not sure exactlyt how I could do it. I want to have a single view when the view truly is common, but when its actually different is there a better way to differentiate other than using the multiple Controller approach I stated in #2?

I hope this makes sense, let me know if more clarification is needed.

Thanks

Aucun commentaire:

Enregistrer un commentaire