I currently have a few "parent modules", such as:
- user
- community
In addition, I have "embeddable modules", including:
- photos
- videos
- wiki
These embeddable modules can be embedded into the parent modules. Each module does not have cross dependencies. For example, a user may not know that they have photos, videos, and a wiki, but are aware of a list of embeddable modules that will be included on their page. Similarly, the photos, videos, and wiki modules do not know where they will be embedded.
There are 3 layers of views: - base view layer (includes top navigation bar, logo, etc.) - focuses on the parent view being injected - parent object view layer (e.g., user or community, which displays user photo and name) - focuses on its embeddable views being injected - embeddable view layer - manages what is inside its specific view
Now let's consider the scenario where I am on the user page. The route for the user is #/user. If I want to access the photos of the user through a link, for instance
<a href="#/user/photos/">user photos</a>#/photos, making #/user/photos/ ineffective.
If I simply access
<a href="#/photos">user photos</a>Do you have any suggestions on how to access the photos module while retaining the parent view without creating hard-coded dependencies?
I require something similar to this solution:
$stateProvider
.state(':parent/photos', {
url: ':parent/photos',
templateUrl: 'modules/photos/index.html',
controller: 'PhotosCtrl'
})
This setup would allow me to access the photos module from the user page like so:
<a href="#/user/photos">user photos</a><a href="#/community/photos">community photos</a>The photos module could then utilize the :parent parameter to determine its parent context.
Alternatively, having linking functionality such as:
$stateProvider.state('user.photos', /*&*/'photos')to connect modules at a global level would also be beneficial.