Why should I use UI-Router in AngularJS? Advantages of using UI-Router in AngularJS.
Most applications can be broken up into regions. At a minimum, applications usually have a header, a main content area, and a footer. Commonly, applications may have an additional sidebar on the left or right side of the page as shown below. In most use cases, all of these regions (views) are shown on the page at the same time. With the built-in AngularJS router, ngRoute, only one view (ng-view) is allowed per page. This limitation causes people to use includes (ng-include) or other workarounds to create a layout or master page for their application. UI-Router supports multiple views and each can have its own corresponding Controller so that each of these regions can be encapsulated and reused throughout the application if needed.
The common example of a nested view in applications is a master/detail or, more specifically, a list/detail page. Many applications show a list of items then when you click on an item you see the detail for that item. Taking this example further, you might then click an edit link when viewing the item’s details that takes you to an editable form for the item (see the diagram below to visualize). This scenario is easily achieved with the built-in AngularJS router,
ngRoute, if the list and detail are on separate pages (or views as they are called in AngularJS). However, if you want the list to remain on the page while you show the detail to the right or below the list this becomes more challenging. To be clear, this requirement can be achieved with
ngRoute by sharing a single view with two controllers: one for the list and one for the detail and hiding and showing the detail as needed. The result is not ideal, because we would like the list and detail to each have their own controller and view with only one responsibility (showing a list or showing item details). By encapsulating these user interface areas in their own view we can have a more composable UI that allows us to bring the pieces together or break them apart as needed to meet requirements. Nested views enable us to not only to bring these views together at the same time, but also to nest a view inside another view.