How to create routes in App using Ionic and Angulas.js?

0

EDITED

I was able to create routes with an example of the site itself.

But I noticed that the controllers are in the same main file app.js and the views are in the index.html file.

I would like to know if you can separate this content into different files, where each screen would be in an own html file with your own js file.

Ex:

index.html | app.js  home.html | home.js  help.html | help.js

    
asked by anonymous 23.06.2015 / 18:18

2 answers

3

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>

Follow the documentation: link

    
14.09.2016 / 17:47
3

Friend, you need to take a look at the ionic documentation because you have a lot of reference about it.

To create your html files for each view you need is quite simple you can create these files that are the templates in the ionic.

If you create an app using the ionic command using the "tabs" template you will see how it works:

$ ionic start myApp tabs

Inside the folder www will have a folder templates and there contains the respective views to each "route".

    
28.06.2015 / 17:31