ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
193 stars 187 forks source link

Support ui-route and components #236

Closed Nkmol closed 6 years ago

Nkmol commented 7 years ago

Is it possible to manually import a new version of angular-ui-route?

I am following the best practices of AngularJS which encourage you to use the new Components. Everything works fine, expect States. Where I need at least v1.0.0: https://github.com/angular-ui/ui-router/issues/2627

How can I use this feature within ionic?

Nkmol commented 7 years ago

A way to still use components with a old version of angular-ui-route, is by just writing the component element as the template: <picture />

This way the Controller will be attached to your defined component.

However, this might break some ionic functionality, as ionic does not allow a non-ionic element to be in between them (for example with <ion-nav-view />).

To fix this, you can simply set the wrapper of your component to be your ionic container by tag: <picture ion-view />

In total:

Written in ES6

.component('picture', PictureComponent)
.config($stateProvider => {
    'ngInject';
    $stateProvider
        .state('app.picture', {
            url: '/picture',
            template: `
                <picture ion-view />
            `
        })
})
gabn88 commented 6 years ago

Wow, this is exactly what I needed, thanks!

However, it does not seems to work very well for me. The buttons are not loaded etc.

Did you find a good way to do this?

Nkmol commented 6 years ago

@gabn88 I do not remember having any problems with the other ionic elements using this structure. Maybe it has to do with something else beyond this component syntax?