AngularJS 1 approach for "new foobar" UI overlay <p>I'm using AngularJS 1 with angular-material and ui-router.</p> <p>Does anyone know what the best practice is for providing a UI for some "new foobar" type thing? In other words, let’s say I have a ui.route putting me at <code>/app/#/foobars/</code> which shows a list of all the foobars. At the bottom right is a FAB with a big plus sign, which will bring up a new UI something to allow the user to specify how they want their foobar. What is the best practices for this "UI something" that comes up, using Angular?</p> <ul> <li>Should I use an angular-material dialog? (That’s my first inclination, but it seems old-fashioned.)</li> <li>Do I create a route to <code>/app/#/new-foobar/</code> and just bring up another UI? (This seems heavy-handed; I don’t want to change the URI, plus I probably want to get back to where I came from after creating the foobar.)</li> <li>I think that ui-router allows nested states; is this something I would use? But I don't want the new view/component to be embedded in the current view --- I would expect a card or something to somehow "overlay" whatever view is showing.</li> </ul>