0

EDITADO

Consegui criar rotas com um exemplo do próprio site.

Porém notei que os controllers ficam no mesmo arquivo principal app.js e as views fica no arquivo index.html.

Gostaria de saber se tem como separar esse conteúdo em arquivos diferentes, onde cada tela ficasse em um arquivo html próprio com seu arquivo js próprio.

Ex:

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

2 Respostas 2

3

Tiago, o Ionic utiliza o ui-router como provider para as rotas.

O que você quer fazer é possível.

Exemplo:

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/angular-ui-router@1.0.0-alpha.4/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>

Segue a documentação: https://ui-router.github.io/tutorial/ng1/helloworld

0
3

Amigo, você precisa dar uma olhada na documentação do ionic pois possui bastante referência acerca do assunto.

Para criar seus arquivos html para cada view que necessite é bastante simples você pode sim criar esses arquivos que são os templates no iônic.

Se você criar um app usando o comando do ionic usando o template "tabs" vai poder ver como funciona:

$ ionic start myApp tabs

Dentro da pasta www terá uma pasta templates e lá contém as views respectivas a cada "rota".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .