Structure in an appropriate way an application with different pages

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 :stuck_out_tongue:

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:

  1. 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

  2. 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 :slight_smile: These are probably noobish questions but we just started developing something this complex! Thank in advance for any help!

Why do you have closing </script> in index.html before closing body tag

Yeah you’re right, that should fit in there! I removed it, but it’s still broken :frowning:

I think that problem #1 is because there is no view with name “home” available when in help html view.

I would suggest to create one abstract view called app. With template containing

<ion-nav-view title="Home" name="home"></ion-nav-view>
<ion-nav-view name="help" title="Help"></ion-nav-view>

And your 2 views will be app.help and app.home.

I may be wrong and this is something else though

  1. You only need one ng-app, you can split your controllers in multiple files and work like that. Here is my structure: https://www.dropbox.com/s/5m73hlbm9s9j2oz/Screenshot%202015-03-24%2016.37.41.png?dl=0

Thank you :slight_smile: I’ll look better into it and reply if I will be able to get unstuck (but tomorrow, right now I’m too tired)! Thank for your help!

Ok, I’m having serious problems in understanding how the state machine works, or at least, how to include transitions in the state machines.

I tried to add a third page, so right now my index.html is

    <!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 name="home"></ion-nav-view>
    		<ion-nav-view name="help"></ion-nav-view>
    		<ion-nav-view name="about"></ion-nav-view>
    	</body>
    </html>

and the navigationScript.js is

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'
      }
    }
  })

    $stateProvider.state('about', {
    url: '/about',
    views: {
      about: {
        templateUrl: 'common/navigation/about.html'
      }
    }
  })
})

then I have the pages structured like this one (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="about" >Go to about</button>
		<button class="button button-light" ui-sref="home">Go to home</button>
	</ion-content>
</ion-view>

In both home.html and about.html I have a button to move back to help.html

<button class="button button-light" ui-sref="help">Go to help</button>

but I can’t really figure how to use the states. Actually I can only move “forward” like
home -> help -> about
and from home to about, but not back. So I think that actually my problem is how to add edges to the finite state machine. How can I do it? Should I use the navigationScript, or the problem is on my index.html? I read a lot about navigation but I can’t really figure it out. Actually, the URL is correctly modifed, but the view is not refreshing

Try that

in index.html leave jsut one unnamed view:

<ion-nav-view ></ion-nav-view>

in your routes do something like this:

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home')

  $stateProvider.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'common/main.html'
  })

  $stateProvider.state('app.home', {
    url: '/home',
    views: {
      'main-view': {
        templateUrl: 'common/navigation/home.html'
      }
    }
  })

  $stateProvider.state('app.help', {
    url: '/help',
    views: {
      'main-view': {
        templateUrl: 'common/navigation/help.html'
      }
    }
  })

    $stateProvider.state('app.about', {
    url: '/about',
    views: {
      'main-view': {
        templateUrl: 'common/navigation/about.html'
      }
    }
  })
})

in main.html dosomething like this:

<ion-view hide-back-button="false">
	<ion-side-menus>
		<ion-side-menu side="left">
			<ion-nav-view name="side-menu-view"></ion-nav-view>
		</ion-side-menu>
		<ion-side-menu-content drag-content="false">
			<ion-nav-bar align-title="center">
				<ion-nav-buttons side="left">
					<button menu-toggle="left" class="button button-icon icon ion-navicon">

					</button>
				</ion-nav-buttons>
				<ion-nav-back-button class="button-clear button-icon">
					<!-- <i class="icon ion-ios7-arrow-back"></i> Back -->
					<!-- <i class="ion-arrow-left-c"></i> Back -->
					Back
				</ion-nav-back-button>
			</ion-nav-bar>
			<ion-nav-view name="main-view">
			</ion-nav-view>
		</ion-side-menu-content>
	</ion-side-menus>
</ion-view>
1 Like

I came here to say that I just solved the problem by using only a ion-view and you actually suggested that one minute before! :slight_smile: I made the same example by using the ionic creator and saw that it actually had only one ion-view!

My code right now is just
index.html

    <!DOCTYPE html>
<html>
	<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 ng-app="navigationModule" animation="slide-left-right-ios7">
		<ion-nav-view></ion-nav-view>
	</body>
</html>

navigationScript.js

angular.module('navigationModule', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'common/navigation/home.html'
    })
    .state('help', {
      url: '/help',
      templateUrl: 'common/navigation/help.html'
    })
    .state('about', {
      url: '/about',
      templateUrl: 'common/navigation/about.html'
    })
    ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
});

and the pages are like

<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 home</button>
		<button class="button button-light" ui-sref="about">Go to about</button>
	</ion-content>
</ion-view>

Thank you very much for your help @yurinondual!