angular-ui/ui-router

The de-facto solution to flexible routing with nested views

Tom McKearney

@tommck

build any app that uses it with "strict": true in the tsconfig.json

Chris Thielen

@christopherthielen

ah, let me try that

got it, thanks

Tom McKearney

@tommck

awesome.. thanks for doing that

Deepak

@deepak20c

how to call any service while closing window/tab

Tom McKearney

@tommck

that has nothing to do with routing

Tom McKearney

@tommck

If you want to do lazy loading in Angular, do you need to use SystemJS? I'm a little confused about the implied dependency there

Tom McKearney

@tommck

Unrelated: this code: https://github.com/ui-router/sample-app-angular doesn't have a tsconfig.json file and won't run w/ "npm start" (gets a bunch of TS errors in the node_modules folder) (Created an issue: https://github.com/ui-router/sample-app-angular/issues/332#issue-419528912)

Tom McKearney

@tommck

might not be related to the tsconfig file

Tom McKearney

@tommck

NOTE: That code does have a tsconfig.json, it's just not in the root folder

Chris Thielen

@christopherthielen

No you don’t need systemjs

There is some DI provider with SystemJS in the name that I think is required, but it doesn’t actually use SystemJS. if I remember correctly

Shawn Rieger

@riegersn

Hello! I’m trying to modify state param mid transition, during the resolve (ui-router /angularjs) Is this possible?

Chris Thielen

@christopherthielen

Hi Shawn. The idiomatic way is to redirect the transition if you need to change params

you can’t really do that from a resolve but you can from a transition hook

Tom McKearney

@tommck

Hey all, @christopherthielen - any chance you can take a look at this problem on SO? https://stackoverflow.com/questions/55579916/uirouter-angular-error-staticinjectorerrorappmodulefooservice-stateservi
We've been having this issue on and off and can't figure out what's causing it

tommck @tommck thinks it's time to move away from ui-router

Enl0ve

@Enl0ve

rencently, I find below content on the source code of ui-router, other dom events, You can also customize which DOM events to respond to (instead ofclick) by providing aneventsarray in theui-sref-optsattribute, such as ui-sref-opts="{ events: ['change', 'blur'] }", I try, but failed, anybody who can help me? Thank you

Jakobinec

@Jakobinec

Hi! Can I ask a question about @uirouter/angular-hybrid? Am I in the right place?
I have a hybrid application (Angular+AngularJS). It was created by tutorials from your official sight https://github.com/ui-router/angular-hybrid
And now I want to navigate to url from Angular component TypeScript code.
Could you tell me please the proper way how can I do it (like "this.router.navigate('/dashboard')") and what class I should import.
Thanks!

Chris Thielen

@christopherthielen

Inject UIRouter then use UIRouter.stateService.go('dashboard')

https://ui-router.github.io/ng2/docs/latest/classes/state.stateservice.html#go

Jakobinec

@Jakobinec

Hello! How can I inject Transition into service. This code works well in component, but does not work in service:
const rootScope = this.transition.injector().get('$rootScope');
rootScope.menuItem = 'documentsUpg';
I use hybrid routing (Angular + AngularJS)

Chris Thielen

@christopherthielen

you can not inject $transition$ into a service because it’s not a global object

Gabe

@gabrielmiller_gitlab

I'm working on an AngularJS app that uses an older version of ui-router, 0.4.3. I'd like to some day port the app into Angular2+ and https://github.com/ui-router/angular-hybrid looks like a promising path to upgrade parts of the application piecemeal. That said, I'm trying to get a grasp on router upgrade path.

It's not clear to me what the minimum starting version of ui-router is before implementing angular-hybrid. Should I upgrade ui-router from 0.4.3 to 1.x as a step before implementing angular-hybrid?

I was intending to follow the ui-router upgrade here https://ui-router.github.io/guide/ng1/migrate-to-1_0#breaking-changes, but I wanted a sanity check to see if this is fact necessary before implementing angular-hybrid.

Princeton Collins

@princetoncollins

@Gabe I'm currently in the process of migrating an AngularJS app to Angular. I can share my package.json that shows the current versions I'm using for all ui-router and angular packages if you'd like.

Gabe

@gabrielmiller_gitlab

@princetoncollins that would be appreciated, thank you

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab

"dependencies": {
    "@angular/animations": "^8.2.9",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.9",
    "@angular/compiler": "^8.2.9",
    "@angular/compiler-cli": "^8.2.9",
    "@angular/core": "^8.2.9",
    "@angular/forms": "^8.2.9",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.9",
    "@angular/platform-browser-dynamic": "^8.2.9",
    "@angular/platform-server": "^8.2.9",
    "@angular/router": "8.2.9",
    "@angular/upgrade": "^8.2.9",
    "@uirouter/angular": "6.0.1",
    "@uirouter/angular-hybrid": "9.0.0",
    "@uirouter/core": "6.0.1",
    "@uirouter/rx": "^0.6.5",
    "core-js": "^2.5.4",
    "zone.js": "^0.10.2",
    "rxjs": "^6.5.5",
    "rxjs-compat": "^6.5.5",
}

Don't think you'll need @angular/cdk or @angular/animations and @angular/material.

Gabe

@gabrielmiller_gitlab

Do you know offhand what version of ui-router you were using when you were on AngularJS 1.x?

angular-ui-router, specifically

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab 0.4.2

@Gabe So all my state configurations look something like this:

config.$inject = ['$stateProvider', '$provide'];

function config($stateProvider, $provide) {

  $stateProvider
    .state('engagements', {
      url: '/engagements',
      redirectTo: 'engagements.home',
      template: '<engagement-app />'
    })
    .state('engagements.home', {
      url: '/home',
      views: {
        'main@engagements': {
          template: '<parent-engagement-list />'
        }
      }
    })

If that helps clarify things.

Gabe

@gabrielmiller_gitlab

Nice. Thanks! That's super useful.

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab Np. Glad that helped. :)

Chris Thielen

@christopherthielen

@gabrielmiller_gitlab you should upgrade to 1.x before trying to do the hybrid router thing.

@uirouter/angular-hybrid brings 1.x along for the ride, but it's best to do the 1.x upgrade while still your project is still pure angularjs

Gabe

@gabrielmiller_gitlab

@christopherthielen thanks for the info. I forgot to circle back here and drop a note, but yeah shortly after I started digging into this the other day I noticed even the older releases of angular-hybrid have 1.x as a dependency in package.json :+1:

next up: wrangling build processes :feelsgood:

Zac Brownell

@motleycrujones_twitter

I'm wondering why the StateRegistry.get() method doesn't allow for a more specific/constrained search. I have a situation where our application is trying to decide whether or not a state has already been registered, but it's getting a match on a parent future state declaration - which, is kind of throwing a wrench in our logic. There doesn't appear to be a way to ask the StateRegistry if a specific state is present or not, without accidentally matching this future state.

Maybe I'm not so much wondering "why" the .get() method matches 'example.**' when trying to fetch 'example.specific-child' - I mean, it makes sense; the wildcard state would match at runtime. It's just inconvenient for my needs, since I need to make sure that 'example.specific-child' actually exists or not during configuration and there doesn't seem to be a way to query the StateRegistry in this manner.

(something like an exactMatch or ignoreWildcards param added to the method signature would be ideal)

Zac Brownell

@motleycrujones_twitter

(basically, something that would surface the matchGlob param in the underlying StateMatcher.find() call would be great - if it's easy/not concerning enough)

Chris Thielen

@christopherthielen

@motleycrujones_twitter can't you just do stateRegistry.get().find(s => s.name === 'example.specific-child')?

kapilpipaliya

@kapilpipaliya

hello, i want to use this router in solidjs. how to integrate it with solidjs?

Chris Thielen

@christopherthielen

Is solidjs a component framework/library?

Cody Mikol

@codymikol

I believe so Chris

woodsongem

@woodsongem

Hi All,
please help me to unit test transitions.onStart in angularjs? please share if you have any sample application

Chris Thielen

@christopherthielen

this should get you started @woodsongem :

    it(
      'should call my transition hook',
      mock.inject(($uiRouter, $rootScope) => {
        $uiRouter.stateRegistry.register({ name: 'foo' });
        $uiRouter.stateRegistry.register({ name: 'bar' });

        const spy = jasmine.createSpy('hookFn');
        $uiRouter.transitionService.onStart({ to: 'foo' }, spy);

        $uiRouter.stateService.go('foo');
        $rootScope.$digest();

        expect(spy).toHaveBeenCalled();
      }),
    );

    it(
      'should not call my transition hook',
      mock.inject(($uiRouter, $rootScope) => {
        $uiRouter.stateRegistry.register({ name: 'foo' });
        $uiRouter.stateRegistry.register({ name: 'bar' });

        const spy = jasmine.createSpy('hookFn');
        $uiRouter.transitionService.onStart({ to: 'foo' }, spy);

        $uiRouter.stateService.go('bar');
        $rootScope.$digest();

        expect(spy).not.toHaveBeenCalled();
      }),
    );

Where communities thrive

People

Repo info

Activity