javascript - 添加新模块 AngularJS FountainJS (Yeoman)

Question

我正在使用 fountainJS 我遇到了 AngularJS 播种器的问题。我想我可以用这个脚手架进行开发，因为除了有一些预装的东西之外，它会让我以后的事情变得更容易。

My architecture

我的模块“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>

然后我在应用程序的 ./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。