How to use Angular UI Router? and what are the advantages?

Question

How to use Angular UI Router? and what are the advantages ?

What are the long-term advantages of using it and not the standard of Angularjs?

Answer 1

He’s much better and more powerful than the native angler, I’m going to make a basic comparative:

ngRoute

• URL-based routing
  • That is, only one route per screen and a controller for it
• Does not support multiple routes
  • All html should have only one tag <ng-view>, If you have more than one, Angular will inject the same content into all
  • If a <ng-view> inside of another, there it was, will generate recursiveness

Ui-Router

• Routing based on States
  • That is, the URL is just one tool routing and not a delimiter
• Supports route inheritance, multiples and views on the same screen
  • You can put two tags <ui-view> on the same page and inject a template with its own controller into each one
  • You can also put a <ui-view> within the other for routes within routes without problems, and having full control of the injected content and behavior of each

Implementation

It’s a lot like the ngRoute:

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state("home", {
                url: "/home",
                templateUrl: "home-template.html",
                controller: "HomeController",
            });
    });

See also

• 8 things you need to know about Angualrjs - the first is precisely about Ui-Router
• Angularjs Routing Using Ui-Router - Very nice tutorial for you to see the potential of this tool
• Using Ui-Router - Contents of a material related to a training I gave on Angular + Webapi