CODEWITHSUNDEEP
angularjsangular-ui-routerangularjs-components
thargenediad
thargenediad

Reputation: 395

AngularJS UI-Router won't display all Components (only some)

I've successfully replicated my issue with a fork of the "Hello Galaxy!" plunk embedded within the UI-Router tutorial page.

My plunk: https://plnkr.co/edit/2GqCtEJ4mhBIdJOFHy9c?p=preview

On the existing "Helo Galaxy!" plunk, I added the following module and route config:

// file: hello.js
//     existing "Hello Galaxy!" hello module code above this ↑↑↑
//     then my new module below...

angular.module('hello.product-management', ['ui.router']).config(function($stateProvider) {
    // An array of state definitions
    var states = [
    {
        name: 'product-management-template',
        url: '/product-management-template',
        // Using component: instead of template:
        template: '<h1>Product Management</h1>'
    },
    {
        name: 'product-management-component',
        url: '/product-management-component',
        // Using component: instead of template:
        component: 'product-management'
    },

    ]

    // Loop over the state definitions and register them
    states.forEach(function(state) {
        $stateProvider.state(state);
    });
});

The issue: You can click on the Product Management - Template tab to see the Product Management template, like so:

enter image description here

But you can't view the component template, using the Product Management - Component tab. It just shows an empty view:

enter image description here

I left the original "Hello Galaxy!" plunk's components and routes alone, and they still work fine:

enter image description here

Upvotes: 1

Views: 56

Answers (1)

georgeawg
georgeawg

Reputation: 48968

In the state definition, use camelCase for the component name:

{
    name: 'product-management-component',
    url: '/product-management-component',
    // Using component: instead of template:
    ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶:̶ ̶'̶p̶r̶o̶d̶u̶c̶t̶-̶m̶a̶n̶a̶g̶e̶m̶e̶n̶t̶'̶
    component: 'productManagement'
},

And define the component with camelCase:

̶a̶p̶p̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶'̶p̶r̶o̶d̶u̶c̶t̶-̶m̶a̶n̶a̶g̶e̶m̶e̶n̶t̶'̶,̶ ̶{̶
app.component('productManagement', {

  template: '<h1>Product Management</h1>',
  controller: function () {
    console.log("product management component");
  }      
});

For more information, see AngularJS Developer Guide - Directive Normalization

Upvotes: 2

Related Questions