CODEWITHSUNDEEP
angularjsgruntjsangular-ui-routerangularjs-ng-include
CodyBugstein
CodyBugstein

Reputation: 23312

How to manage ng-includes in ui-router based project

Here's my issue:

My project is mainly contained in index.html, with ui-router placing the various pages in a <div ui-view></div> section.

In one my other pages, let's call it page1, I have an ng-include to a partial in the same subdirectory. However, when I try to include this partial using

<div ng-include="'page1Partial.html'"</div>

I get a console error that 

GET http://localhost/myProj/v3/myproj/app/index/page1Partial.html 404

This is obviously because ui-router moved my page into index.html and it's looking for the ng-include based on that directory.

I really don't want to move the partial to the index folder, as that structurally makes no sense my project. I also, don't want to type out a whole hardcoded path to this same directory (which could potentially change in the future). I want to be able to refer to this partial in a relative, simple and safe way.

What is the best way to efficiently and quickly manage this issue?

I've included what my file structure looks like:

myproj
|-- app
|    |-- index
|    |     |-- index.html
|    |     |-- index.js
|    |-- page1
|    |     |-- page1.html
|    |     |-- page1.js
|    |     |-- page1Partial.html
|    |-- page2
|-- common
|    |-- resources
|    |     |-- page1resources.js
|    |     |-- page2resources.js

Upvotes: 0

Views: 3414

Answers (1)

hon2a
hon2a

Reputation: 7214

If your project is in fact a single-page app (user opens index.html and all other pages are dynamically included using ui-router), you'd save yourself much hassle by simply putting your single point of access (index.html) right in the root folder of your application. All relative paths would then have the root folder as context.

When creating such single-page applications, it is quite common to create index.html automatically during build (see index task in Gruntfile.js in ngBoilerplate).

If you cannot (or don't want to) put your index.html in your root folder, you could just rewrite URLs (in your server) to make it appear to be there. In Apache, you could use mod_rewrite for that:

RewriteEngine on
RewriteRule ^/$ /app/index/index.html [QSA]

(you'd then access your app at http://localhost/myproj/.)

Upvotes: 1

Related Questions