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

Asked

Viewed 7,712 times

6

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?

1 answer

19


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

  • 1

    You cannot make the answer simpler and more objective, but if you want to buy a little more time, open the second link @anisanwesley mentions: https://scotch.io/tutorials/angular-routing-using-ui-router

Browser other questions tagged

You are not signed in. Login or sign up in order to post.