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

Asked

Viewed 1,658 times

0

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 stay in the archive index.html.

I wonder if you have how to separate this content into different files, where each screen was in an own html file with its own js file.

Ex:

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

angularjs ionic route

2 answers

3


Tiago, Ionic uses ui-router as Provider for 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

3

Friend, you need to take a look at the documentation of Ionic because it has enough reference about the subject.

To create your html files for each view you need is quite simple you can create those files that are the templates in the iônic.

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

$ ionic start myApp tabs

Inside the www folder you will have a templates folder and it contains the respective views for each "route".

Browser other questions tagged angularjs ionic route

You are not signed in. Login or sign up in order to post.