Hey all,
I’m new to ionic and working on my first project. I find that I do not like the structure of the driftyco provided starters. I want to organize my code by concern (i.e. users/ contains the template and js related to users as so on) instead of having templates/ and js/. I like the ideas discussed in this medium post for a more detailed description of what I’m going for.
When I attempted to organize my code is such a way, it worked fine the browser via ionic serve but gave the white screen of death in the ios emulator. When I switched everything back to templates/ and js/ everything worked as expected. My first thought was that I had a path issue/typo, but I have yet to be able to find it.
My question(s): does Ionic require us to use the organization structure laid out by the starter apps? Has anyone successfully reorganized his/her code?
Many thanks for any opinions/help.
No, we do not dictate the structure of an app.
Take a look at this article, it should get you pointed in the right direction as far as organization.
http://calendee.com/2013/12/29/angularjs-code-organization/
@mhartington,
Thanks for your reply! I couldn’t imagine there was some restriction, I just thought I might ask.
I still haven’t been able to track down why I was getting the WSOD, but I suspect it is some mistake on my end.
FWIW, I disagree with the thrust of the article you post – that one would want to have a directives/ dir instead of grouping the code by concerns/larger concepts within one’s app. But to each his own.
Thanks again,
Mbeizer
People definitely are opinionated about how things are structured, but yes, to each their own.
As far as the WSOD, can you open your console and see if your getting any errors?
@mhartington,
I get no errors in the console in the browser when running ionic serve. I get what appears to be 404 errors when running ionic emulate ios. Something to the effect of:
Failed to load resource: The requested URL was not found on this server.
The path it is looking for is: Users/me/Library/Application Support/iPhone Simulator/7.1/Applications/some-sort-of-uid/nameOfMyApp.app/app/visits/visits.html
app/visits/ would be an example of the organization that I prefer.
Relevant bits from the router:
.state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.visits', { url: "/visits", views: { 'visits-tab': { templateUrl: "../app/visits/visits.html", controller: 'VisitsCtrl' } } }) $urlRouterProvider.otherwise("/tab/visits");
Please note that this issue is across all templateUrls. Which made me think path problem, but it works in the browser so now I’m not sure if it’s an xcode/iphone simulator issue.
Thanks for taking a look!
Hmm, so this seems to be the cause of the issue.
So a good thing to keep in mind with angular is that all links are relative to the index.html.
In this case, removing the ../ should solve the issue
@mhartington 
Thank you for diagnosing that! I can only hope now that someone else reads this and finds it useful.
1 Like