Ionic and Angular: Routing not working - angularjs

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

Answer 1

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.