How to create routes in App using Ionic and Angulas.js?
Edited
I was able to create routes with an example from the site itself.
But I noticed that the controllers are in the same main file app.js and the views are in the file index.html.
I would like to know if you can separate this content into different files, where each screen would be in its own html file with its own js file.
Ex:
Index.html / app.js home.html / home.js help.html | help.js
2 answers
James, Ionic uses the ui-router as the provider for the routes.
What you want to do is possible.
Example:
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});<html>
<head>
<script src="//npmcdn.com/show-current-browser-url"></script>
<script src="//npmcdn.com/angular@latest/angular.js"></script>
<script src="//npmcdn.com/[email protected]/release/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold }</style>
</head>
<body ng-app="helloworld">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>Follows the documentation: https://ui-router.github.io/tutorial/ng1/helloworld
Friend, you need to take a look at the ionic documentation as it has a lot of reference on the subject.
To create your html files for each view you need is quite simple you can create these files that are the templates in Ionic.
If you create an app using the ionic command using the "tabs" template you will be able to see how it works:
$ ionic start myApp tabs
Inside the www folder will have a templates folder and there contains the respective views each "route".