Mateusz Cisek Mateusz Cisek - 3 months ago 52
AngularJS Question

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)?

Answer

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

Comments