Question

我对ES6和AngularJS都很新，我对状态提供程序（或与之相关的东西）有问题。我正在尝试按照我发现的GitHub回购中的项目结构构建应用程序：

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

当我尝试将组件分配到$stateProvider状态时，会出现问题。

这是无效的代码：

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;

我可以假设该应用程序还有其他问题，但是当我用基本作业替换这个“组件事物”时，它的工作正常。

实际运作的代码：

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;

以下是homepage.component.js代码：

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

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

export default homepageComponent;

当我插入<homepage></homepage>标签时，它正好工作。谁能告诉我这两种方式有什么不同，我做错了什么？

顺便说一句。有谁知道为什么文件末尾有这个.name（在回购中）？

Answer 1

您无法像这样添加组件，状态链接到模板。此功能将在下一版本（1.0.0）中添加

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

使用.name属性可避免重复字符串。您可以调用您的组件homepage.name

AngularJS $ stateProvider不适用于组件

1 个答案: