添加新的模块AngularJS FountainJS（Yeoman）

Question

我正在使用FountainJS，并且遇到了AngularJS此播种器的问题。 我认为我可以使用此脚手架进行开发，因为除了附带一些预装的东西之外，它以后还会使我更轻松。

我的建筑

和我的模块“ eventsList”的文件是这样的：

./src/app/eventsList/eventsList.js

class EventsListController{
    constructor(){
        this.hola = "hola";

        this.event = {
            name: "das",
            place: "",
            day: "",
            hour: ""
        };  

        this.events = [
            {
                name: "nombre alerta",
                place: "lugar",
                day: "dia"
            },
            {
                name: "nombre alerta 222",
                place: "lugar",
                day: "dia"
            }
        ];

    };
};

export const eventsList = {
  templateurl: 'app/eventsList/eventsList.html',
  controller: EventsListController
};

./src/app/eventsList/index.js

import angular from 'angular';

import {eventsList} from './eventsList';

export const eventsListModule = 'eventsList';

angular
.module(eventsListModule, [])
.component('eventsList', eventsList);

以及./src/app/eventsList/eventsList.html中组件的html

<div class="techs">
    <div>
        {{$ctrl.hola}}
        {{$ctrl.event.name}}
        {{$ctrl.events}}
        <select ng-options="evento in $ctrl.events">
            <option value="">Choose City</option>
        </select>
    </div>
</div>

这是我的应用程序和模块指令的主视图。 在./src/app/main.html中

<events-list></events-list>
<div class="main-container">
  <fountain-header></fountain-header>
  <main class="main">
    <fountain-title></fountain-title>
    <fountain-techs></fountain-techs>
  </main>
  <fountain-footer></fountain-footer>
</div>

然后，将模块注册到app的./src/index.js中，在我项目的根目录中，如下所示：

import angular from 'angular';

import {techsModule} from './app/techs/index';
import {eventsListModule} from './app/eventsList/index';
import 'angular-ui-router';
import routesConfig from './routes';

import {main} from './app/main';
import {header} from './app/header';
import {title} from './app/title';
import {footer} from './app/footer';

import './index.less';

angular
  .module('app', [techsModule, eventsListModule, 'ui.router'])
  .config(routesConfig)
  .component('app', main)
  .component('fountainHeader', header)
  .component('fountainTitle', title)
  .component('fountainFooter', footer);

当我进入浏览器时，它无法正常运行，因为我看不到模块的html，但是我认为我正在前进，因为我的模块位于DOM中，并且具有隔离范围。

浏览器中的结果 ：

有任何建议可以解决这个问题吗？

提前致谢。

Answer 1

你有一个错字，你需要更换templateurl与templateUrl 。

Answer 2

我认为，您忘记了在HTML中添加<events-list></events-list> 。