CODEWITHSUNDEEP
angularjsangular-ui-routerngroute
Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24600

ui-router for manual parsing URL without using views

I want to watch a location and run a function when the location changes. I also want to be able to easily change locations by running a function. I want to be able to use the browser back buttons.

Sound like a good mission for ngRoute or ui-router

No.

I don't need views, templates, and controller.

I want the power of ui-router and ngRoute for parsing URL's and get the stateParams.

In other words: How to use routes in angular without using views, templates, or controllers?

Upvotes: 0

Views: 103

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Sounds what you need is just the $location service. You can use it without ngRoute or ui-route.

The $location Service. What does it do?

The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.

The $location service:

  • Exposes the current URL in the browser address bar, so you can
    • Watch and observe the URL.
    • Change the URL.
  • Maintains synchronization between itself and the browser's URL when the user
    • Changes the address in the browser's address bar.
    • Clicks the back or forward button in the browser (or clicks a History link).
    • Clicks on a link in the page.
  • Represents the URL object as a set of methods (protocol, host, port, path, search, hash).

-- AngularJS Developer Guide -- Using $location

Events

$locationChangeStart

Broadcasted before a URL will change.

$locationChangeSuccess

Broadcasted after a URL was changed.

-- AngularJS $location Service API Reference

You can use the $location service without either the Angular router or the Angular-UI router. In fact you can use it if you want to roll your own router.

Upvotes: 1

Ilya Chernomordik
Ilya Chernomordik

Reputation: 30275

I am not sure what is your setup is, but if you control all the routes and they are rather limited, then you can try to add the "abstract" states, they don't need a view or a controller. I think that by the way this is not required for ordinary states either, but not 100% sure.

Perhaps if you define the abstract route for the top of your application, then you will get events for all "theoretical" children.

You can find an example of abstract state here

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
    })

Now if you will go to /contacts you should get the event of stateChange, and I think you will get it if you will go to /contacts/something as well. In the worst case you might define you whole application as a tree of this parent/child states that are all abstract.

To handle the event you need to do this:

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var greeting = toState.data.customData1 + " " + toState.data.customData2;
    console.log(greeting);

Upvotes: 1

Related Questions