angular-ui/ui-router, how do I inject partial view using $stateProvider?

Question

I am trying to inject a panel for editing, depending if the viewer is the owner, or not. Right now, I am having trouble just injecting the panel/partial view into the html. I want my compositions/views/view.html to be the 'base' html page, where the partial is injected in. Then the partial view is at compositions/views/partials/views.tools.html. Does anybody see something wrong with my $stateProvider that would explain why I cannot inject my partial into my views.html?

Here is my $stateProvider:

$stateProvider
        .state('all compositions', {
            url: '/compositions/recent',
            templateUrl: 'compositions/views/list.html'
        }). 
          state('view', {
                url: '/compositions/view/:compositionId',
                views: {
                'theTool':{
                 templateUrl:'compositions/views/partials/view.tool.html'   ,
                    controller: 'CompositionsController'
                }
                },
                templateUrl: 'compositions/views/view.html',
                controller: 'CompositionsController',

            }). //other states here

this is my markup for my view.html (main html)

<div ui-view="theTool"></div>
<section data-ng-controller="CompositionsController" data-ng-init="findOne()">
    <h2>{{composition.title}}</h2>
    <div ng-bind-html="trustedContent"></div>
</section>

Any help or advice is greatly appreciated. Thanks

Answer 1

Here I created a working example, which should give all the answers.

The adjusted state defintion is:

$stateProvider
  .state('allCompositions', {
    url: '/compositions/recent',
    templateUrl: 'compositions.views.list.html'
  }).

state('view', {
  url: '/compositions/view/:compositionId',
  views: {
    '': {
      templateUrl: 'compositions.views.view.html',
      controller: 'CompositionsController',
    },
    'theTool@view': {
      templateUrl: 'compositions.views.partials.view.tool.html',
      controller: 'CompositionsController'
    }
  },

the most important is, that the compositions.views.view.html is now playing the role of a target for the sibling view theTool. both views are defined on the same state ('view') but one of them is injected into the other.

Also in the index.html I did this change:

<!--<div ui-view="theTool"></div>-->
<div ui-view=""></div>

so now we do have unnamed ui-view instead of the named. That's why both states

• allCompostions
• view

which target unnamed view '' are now properly rendered. Se more here in this example

More about the the view insertion logic:

• View Names - Relative vs. Absolute Names

small cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

Awesome examples from the same source:

.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "[email protected]" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }