Split views in diffrent files


I’m newbie with Ionic and Angular and need a little help. I have an index.html file and its very big becouze i have a lot <script id="%viewname%.html" type="text/ng-template"></script> with content. when i tried to split them in different html file i got error of cross requests. As far i understand i cant do this becouse Ionic is built on angular-ui router or Im wrong and there is some way to do this? Thanks for reading and excuse me for my bad english skills.

Look at this codepen example:

this is made with splitted templates and it is working

Yes, but i whant to split templates in files, like teamplate1.html, teamplate2.html, and all of them are diffrent files.

okay then you do not need the

<script id="%viewname%.html" type="text/ng-template"></script>


Put your template in a file.html
In your state-definition use templateUrl: YOUR_PATH_ON_FILESYSTEM instead of template: TEMPLATEID

state('mystate', {
  url: '/mystate,
  templateUrl: 'PATH'

Got error XMLHttpRequest cannot load YOUR_PATH_ON_FILESYSTEM/vehicles.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

In index.html i have: `


in app.js:
.state("vehicles", { url: "/vehicles", templateUrl: "views/vehicles.html"})

your should run that in a local static fileserver (node modules like ws) or using ionic cli command “ionic serve” to do it automatically :wink: