添加新模块AngularJS FountainJS（Yeoman）

Question

我正在使用 fountainJS ，并且我遇到了AngularJS这个播种机的问题。我想我可以使用这个脚手架进行开发，因为除了预装了几个东西外，它还会让我以后更轻松。

My architecture

和我的模块的文件＆＃34; eventsList＆＃34;是这样的：

./ SRC /应用/ 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 /应用/ 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>。