Using AngularJs 1.6.1 and Cannot get components to load

[Troy1b4]

I have followed the details of instruction on how to load components using the state router and my code, as far as the $stateProvider routing goes is almost exact. I cannot get it to work. I also get a controller not registered error when I provide a controller reference string to the state. Need some help please. I am using UI-Router 1.0.0 rc1. I will code to help move this forward.

@Troy1b4 check this plnkr out.

[Troy1b4]

I appreciate your post, and I see that the way the solar system app works appears accomplishes what I need, but I do not see any reference to a component as part of a $StateProvider state. Looking at the documentation for angular-ui-router@1.0.0-alpha.4, which I identified in Plunker, I see the following:

angular.module('hellogalaxy').component('hello', {
  template:  '<h3>{{$ctrl.greeting}} Solar System!</h3>' +
             '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',
           
  controller: function() {
    this.greeting = 'hello';
  
    this.toggleGreeting = function() {
      this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
    }
  }
})

var helloGalaxy = {
  name: 'hello',
  url: '/hello',
  component: 'hello'
}

I understand that this is a little different than what I am doing, but this is the direction I am given and it does not appear to work. Notice the "component" is listed in the state like I do. I am using 1.0.0-rc.1 which my understanding of versioning should be a newer version that what is used. I prefer this newer way of accomplishing what I need. Do you identify anything with what I provided, in my code, that may be keeping it from working correctly?

Hi @Troy1b4!

This helloGalaxy object is passed to the forEach loop on line46 from hellosolarsystem.js in my plnkr.

I don't know exactly your problem, but maybe I could help if you provide a runnable code sample (plnkr, jsbin, whatever...)

[Troy1b4]

I will give it a try. I am pretty new to Plunker. I do however have all my code, for the most part listed here: http://stackoverflow.com/questions/41645622/how-do-i-get-angularjs-ui-router-to-load-components-for-angularjs-1-6-1-app

…

On Mon, Jan 16, 2017 at 8:43 AM, Octavian Cioaca ***@***.***> wrote: Hi @Troy1b4 <https://github.com/Troy1b4>! This helloGalaxy object is passed to the for loop on line46 from hellosolarsystem.js in my plnkr. I don't know exactly your problem, but maybe I could help if you provide a runnable code sample (plnkr, jsbin, whatever...) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3265 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADsSBUuoiaOiJI06QFdb_8YSPEnNCH-ks5rS4IcgaJpZM4LjWEI> .

-- Troy Crowe (615) 589-0845 My LinkedIn Profile <http://www.linkedin.com/in/troycrowe>

[deanapeterson]

Just ran into this. I discovered if a component is a single word not dash-separated/camelCase it won't render.

[christopherthielen]

@Troy1b4 Your comments in your stack overflow indicate that you have found the problem to be with your "Microsoft MVC" setup, so I'm closing this issue.

I discovered if a component is a single word not dash-separated/camelCase it won't render.

@deanapeterson that's definitely not true, as can be seen here in the official tutorial:
https://plnkr.co/edit/2SSO4Y?p=info

  // An array of state definitions
  var states = [
    { 
      name: 'hello', 
      url: '/hello', 
      // Using component: instead of template:
      component: 'hello'  
    },
    
    { 
      name: 'about', 
      url: '/about', 
      component: 'about'
    },
    ...