添加新模块 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

我想，您忘记在 html 中添加 <events-list></events-list>。

Answer 2

你打错了，你需要把templateurl换成templateUrl。

添加新模块 AngularJS FountainJS (Yeoman)

Adding new Module AngularJS FountainJS (Yeoman)

javascript

angularjs

yeoman

angular