새 모듈 추가 AngularJS FountainJS (Yeoman)

Question

나는 fountainJS을 사용하고 있으며 AngularJS이라는이 시드러에 문제가 있습니다. 나는이 발판으로 개발할 수 있다고 생각합니다. 왜냐하면 여러 가지 미리 설치된 것들이 더해질 것이기 때문에 나중에 나를 쉽게 만들 수 있기 때문입니다.

./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/ :

My architecture

내 모듈의 파일 "이벤트리스트 '이있다 앱/이벤트 목록/색인 .js

import angular from 'angular'; 

import {eventsList} from './eventsList'; 

export const eventsListModule = 'eventsList'; 

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

(210)

그리고 에서 구성 요소의 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/eventsList/eventsList.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/app/main.html 내가 이렇게 내 프로젝트의 루트에, ./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 및 분리 된 범위에 있기 때문에 방해가되고 있다고 생각합니다. 브라우저에서

결과 :

어떤 sugestions을이 문제를 해결하려면?

미리 감사드립니다.

Answer 1

오타가 있습니다. templateurl을 templateUrl으로 대체해야합니다.

Answer 2

나는 당신이 당신의 html로 <events-list></events-list>를 추가하는 것을 잊었다 고 생각한다.