CODEWITHSUNDEEP
angularjsecmascript-6
Mateusz Cisek
Mateusz Cisek

Reputation: 815

AngularJS $stateProvider does not work with component

I am pretty new with both ES6 and AngularJS and I have a problem with the state provider (or something related to it). I am trying to build an app following the project structure presented on a GitHub repo I found:

https://github.com/AngularClass/NG6-starter

The problem occurs when I am trying to assign my component to $stateProvider state.

This is the code that is not working:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import homepageComponent from './homepage.component';

const moduleName = 'app.components.homepage';

let homepageModule = angular.module(moduleName, [
  uiRouter
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  'ngInject';

  $stateProvider
    .state('homepage', {
      url: '/',
      component: 'homepage'
    });

  $urlRouterProvider.otherwise('/');
}])
.component('homepage', homepageComponent)
.name;

export default homepageModule;

I could assume there is something else wrong with the application, but when I replace this "component thing" with basic assignments it's working just fine.

The code that actually works:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import template from './homepage.html';
import controller from './homepage.controller';

const moduleName = 'app.components.homepage';

let homepageModule = angular.module(moduleName, [
  uiRouter
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  'ngInject';

  $stateProvider
    .state('homepage', {
      url: '/',
      restrict: 'E',
      bindings: {},
      template: template,
      controller: controller,
      controllerAs: '$ctrl'
    });

  $urlRouterProvider.otherwise('/');
}])
.name;

export default homepageModule;

And here is the homepage.component.js code:

import template from './homepage.html';
import controller from './homepage.controller';
import './homepage.scss';

let homepageComponent = {
  restrict: 'E',
  bindings: {},
  template,
  controller
};

export default homepageComponent;

When I insert <homepage></homepage> tag, it's just working. Could anyone please tell me what is the difference between these two ways and what am I doing wrong?

BTW. Does anyone know why there is this .name at the end of files (in the repo)?

Upvotes: 0

Views: 182

Answers (1)

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1065

You cannot add your component like this, a state is linked to a template . This feature will be add in the next version (1.0.0)

cf: https://github.com/angular-ui/ui-router/issues/2547

Using the .name property avoids duplicating strings. You could call your component homepage.name

Upvotes: 1

Related Questions