Hello people.
Before starting with my request I’d like to apologize if in some parts my english is not correct, I’m not a native english speaking and I’m pretty tired right now
I’m working with a group of friends to an application that we have to develop for both android and ios, and we thought to use ionic since it should be a pretty easy application. In this week we tried to take out the most from Angular JS (that we didn’t know before) and ionic, but today I’m struggling with something that maybe for most of the people here would be pretty easy. It’s also the first application we develop together (apart a couple of university projects in java) so maybe we don’t have everything clear.
Right now, we’re struggling with easily making the app “scalable”, since we’re working on different pages (functionalities) of the app, so I was looking into how to navigate between pages. I already went through the tutorial on navigation, and I think that it was pretty clear, so this is what I did.
Since we don’t want any header or footer, I removed the bars and make something smaller like this
index.html
<!DOCTYPE html>
<html ng-app="navigationModule">
<head>
<link data-require="ionic@1.0.0-beta6" data-semver="1.0.0-beta6" rel="stylesheet" href="lib\ionic\css\ionic.css" />
<script data-require="ionic@1.0.0-beta6" data-semver="1.0.0-beta6" src="lib\ionic\js\ionic.bundle.js"></script>
<link rel="stylesheet" href="css\style.css" />
<script src="common\navigation\navigationScript.js"></script>
</head>
<body>
<ion-nav-view title="Home" name="home"></ion-nav-view>
<ion-nav-view name="help" title="Help"></ion-nav-view>
</script>
</body>
</html>
Script.js
var app = angular.module('navigationModule', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home')
$stateProvider.state('home', {
url: '/home',
views: {
home: {
templateUrl: 'common/navigation/home.html'
}
}
})
$stateProvider.state('help', {
url: '/help',
views: {
help: {
templateUrl: 'common/navigation/help.html'
}
}
})
})
home.html
<ion-view title="Home">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Login page should go here</p>
<button class="button button-light" ui-sref="help">Go to help</button>
</ion-content>
</ion-view>
help.html
<ion-view title="Help">
<ion-content padding="true">
<h2>Test help</h2>
<p>Help page</p>
<button class="button button-light" ui-sref="home">Go to homepage</button>
</ion-content>
</ion-view>
In this way we actually have 2 problems:
-
I can only navigate from home.html page to help.html page with the correspondent button, but the button on help.html doesn’t bring me back to the homepage
-
If I add an application on the single html pages, like, for example, the following one, the application doesn’t get bootstrapped since I already defined an application in index.html
Name:
{{name}}
I was only expecting the second problem, but it would be in any case to have different modules to handle the different functionalities. How can we solve this problem? Just have a single application for the whole project and add controllers and providers to that application? And why do we have problem n.1?
I hope I was clear and that someone could help us These are probably noobish questions but we just started developing something this complex! Thank in advance for any help!