Ionic and Angular: Routing not working

Question

I have an Ionic sidemenu project with the following menu:

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable" align-title="center">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-content>
            <div class="list">
                <a class="item item-icon-left" menu-close href="#/app/products">
                    <i class="icon ion-home"></i>
                    <h2>Home</h2>
                </a>
                <a class="item item-icon-left" menu-close href="#/app/account">
                    <i class="icon ion-person"></i>
                    <h2>mein Konto</h2>
                </a>
                <a class="item item-icon-left" menu-close href="#/app/orders">
                    <i class="icon ion-android-list"></i>
                    <h2>meine Bestellungen</h2>
                </a>
            </div>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

The hrefs defined here are all working as intended.

My products page now has several sub-pages.

Html-File:

<ion-view view-title="Home">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="product in products" href="#/app/products/{{product.templateUrl}}">
                {{product.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

JS-File:

angular.module('App.Products', ['App.Products.Prints', 'App.Products.Box', 'App.Products.Book', 'App.Products.Framed'])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.products', {
        url: "/products",
        views: {
            'menuContent': {
                templateUrl: "modules/products/products.html",
                controller: 'ProductsController'
            }
        }
    });
})

.controller('ProductsController', function ($scope, ProductsFactory) {
    $scope.products = [];

    init();

    function init() {
        $scope.products = ProductsFactory.getProducts();
    }
})

.factory('ProductsFactory', function() {
    var products = [
        {
            name: 'Prints',
            img: 'img/wardwarz.png',
            templateUrl: 'prints'
        },
        {
            name: 'PhotoBox',
            img: 'img/argo.png',
            templateUrl: 'box'
        },
        {
            name: 'Photobuch',
            img: 'img/django.png',
            templateUrl: 'book'
        },
        {
            name: 'Photo im Rahmen',
            img: 'img/ic_profile.png',
            templateUrl: 'framed'
        }
    ];

    var factory = {};

    factory.getProducts = function () {
        // Hier könnte ein HTTP Request rein um die Produkte vom Server zu erhalten!

        return products;
    }

    return factory;
});

and to show one example one content of a sub page:

Html-File:

<ion-view view-title="Prints">
    <ion-content>

    </ion-content>
</ion-view>

JS-File:

angular.module('App.Products.Prints', [])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.products.prints', {
        url: "/products/prints",
        views: {
            'menuContent': {
                templateUrl: "modules/products/prints/prints.html"
            }
        }
    });
});

When i now start the app ionic serve the navigation of the sidemenu works fine and i can open my products page. The navigation to prodcuts/prints does not work. I dont get an error message or anything. There is just nothing happening after the click on the item.

Whats going worng here?

An example Project can be found here: Mega File - MyApp.rar

yes. same behaviour. no error. no 404. no cant find source. its just doing nothing. — Mulgard
– Mulgard, Commented May 26, 2015 at 12:56
since i have no idea how to work with jsfiddle i uploaded a sample project here: megafileupload.com/1ZRf/myApp.rar — Mulgard
– Mulgard, Commented May 26, 2015 at 13:21
cant figure out whats the problem. i get an error if the url isnt correct. i get no error in my project so the pathes should be correct. I really dont get why the routing isnt working. — Mulgard
– Mulgard, Commented May 26, 2015 at 18:39

Pedro Matos · Accepted Answer · 2015-05-26 19:17:10Z

3

Instead of using only href to do your navigation use

ui-sref="name_of_the_state"

Example:

ui-sref="app.products.prints"

This way you will not have issues with your navigation on angular/ionic.

If you even have a parameter in your route, like:

$stateProvider.state('app.products.edit', {
    url: "/products/edit/:id",
    views: {
        'menuContent': {
            templateUrl: "modules/products/prints/prints.html"
        }
    }
});

you can use:

ui-sref="app.products.edit(1)"

Also, I'm not seeying an abstract route on this, the app. It should be like:

app -> abstract
app.products
app.products.prints

I was able to simulate the error on my PC. When you work with nested states you like app.products.print you need a intermediary view like this:

Example from a code I have on my pc that is working:

.state("admin", {
                url: "/admin",
                abstract: true,
                views: {
                    "body": { templateUrl: "partials/_layoutAdmin.html" }
                }
            })
            .state("admin.page", {
                url: "/page/:idEdition",
                abstract: true,
                views: {
                    "header": { templateUrl: "partials/header.html", controller: "DefaultHeaderController" },
                    "content": { templateUrl: "partials/_layoutAdminEdition.html" }
                }
            })
            .state("admin.page.create", {
                url: "/create",
                views: {
                    "content": { templateUrl: "partials/admin.page.form.html", controller: "PageFormController" }
                }
            })

Example of Templates

The main layout has thi

<div data-ui-view="body"></div>

The _layoutAdmin has this one

<header data-ui-view="header"></header>



<div class="container-fluid">
    <div class="row">
        <div data-ui-view="content"></div>
    </div>
</div>

When the code enters the admin state it will load this first piece...

THEN...

<div data-ui-view="content" class="edition-form"></div>

AND THEN... the form CODE

So, in your case, you have app.products.prints:

app -> need a view -> ok you got it

app.products -> also need a view -> ok you got it

app.products.prints -> inside app.products view (products.html) you need a to show this inside it.

For simplicity, I suggest you to change it's name to app.productsPrint (without the "." and you'll be able to do it the way you are doing it right now with no impact.

Made some changes on the code you provided:

<ion-view view-title="Home">
    <ion-content>
        <div ui-view="myTestContent"></div>
    </ion-content>
</ion-view>

Notice the ui-view="myTestContent"

and

.state('app.products.prints', {
        url: "/prints",
        views: {
            'myTestContent': {
                templateUrl: "modules/products/prints/prints.html"
            }
        }
    });

and it worked.

So, in your case I recommend you to use productPrints instead of products.print. This nesting is used in those view inside view scenarios.

edited May 26, 2015 at 19:17

answered May 26, 2015 at 13:21

Pedro Matos

3872 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mulgard Over a year ago

same behaviour with ui-sref.

Pedro Matos Over a year ago

do you have an app abstract state on your route list?

Mulgard Over a year ago

yes i have:

$stateProvider.state('app', {         url: "/app",         abstract: true,         templateUrl: "modules/menu/menu.html",     });

Mulgard Over a year ago

Hi. Thank you for your help. I could not get your example with <div ui-view="myTestContent"></div> working but changing the state from app.products.prints to app.prints worked very good. thank you.

ownking Over a year ago

@PedroMatos The ui-sref syntax only works for me like this ui-sref="app.products.edit({ id: 1 })"

Collectives™ on Stack Overflow

Ionic and Angular: Routing not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related