ste.cape
ste.cape

Reputation: 45

Issue with angular component

I'm trying to learn AngularJS and Meteor.
I'm working on c9.io.
I'm trying to realize a simple menu.
This is my folders structure:

enter image description here

And this is the code:
index.html

<head>
  <base href="/">
  <title>Navigazione</title>
</head>
 
<body>
  <div class="container" ng-app="content">
    <page></page>
  </div>
</body>

main.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';

import page from '../imports/ui/page/page';
 
angular.module('content', [
  angularMeteor,
  page.name
]);

menu.html

<ul>
  <li ng-repeat="item in menuCtrl.items">
    <a ui-sref="{{item.link}}">{{item.text}}</a>
  </li>
</ul>

menu.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';

import template from './menu.html';

const name = 'menu';

class MenuCtrl {
  constructor() {
    this.items = [{
      text: 'Home',
      link: 'home'
    }, 
    {
      text: 'Lights',
      link: 'lights'
    }, 
    {
      text: 'Temperatures',
      link: 'temperatures'
    }];
  }
}
 
export default angular
  .module(name, [
    angularMeteor
  ])
  .component(name, {
    templateUrl: template,
    controllerAs: 'menuCtrl',
    controller: MenuCtrl
  })

page.html

<header>
  <h1>Page</h1>
</header>
 
<menu></menu>

<div ui-view></div>

page.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';

import template from './page.html';
import menu from '../../components/menu/menu';
import home from '../pages/home/home';
import lights from '../pages/lights/lights';
import temperatures from '../pages/temperatures/temperatures';
 
const name = 'page';

export default angular.module(name, [
  angularMeteor,
  uiRouter,
  menu.name,
  home.name,
  lights.name,
  temperatures.name
])
  .component(name, {
    templateUrl: template,
    controllerAs: name
  })
  .config(config);
 
function config($locationProvider, $urlRouterProvider) {
  'ngInject';
  $locationProvider.html5Mode(true);
  $urlRouterProvider.otherwise('/home');
}

lights.html

<header>
  <h1>Lights</h1>
</header>

<div>{{lgt.luci}}</div>

lights.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
 
import template from './lights.html';

const name = 'lights';

class LightsCtrl {
  constructor() {
    this.luci = 'Hello';
  }
}
 
export default angular
  .module(name, [
    angularMeteor,
    uiRouter
  ])
  .component(name, {
    templateUrl: template,
    controller: LightsCtrl,
    controllerAs: 'lgt'
  })
  .config(config);
 
function config($stateProvider) {
  'ngInject';
  $stateProvider
    .state(name, {
      url: '/'+name,
      templateUrl: template,
      controllerAs: 'lgt',
      controller: LightsCtrl
    });
}

home.html

<header>
  <h1>Home</h1>
</header>

home.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
 
import template from './home.html';

class HomeCtrl {}

const name = 'home';
 
// create a module
export default angular.module(name, [
  angularMeteor,
  uiRouter
]).component(name, {
  template,
  controllerAs: name,
  controller: HomeCtrl
})
  .config(config);
 
function config($stateProvider) {
  'ngInject';
  $stateProvider
    .state(name, {
      url: '/'+name,
      templateUrl: template
    });
}

temperatures.html

<header>
  <h1>Home</h1>
</header>

temperatures.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
 
import template from './home.html';

class TemperaturesCtrl {}

const name = 'temperatures';
 
// create a module
export default angular.module(name, [
  angularMeteor,
  uiRouter
]).component(name, {
  template,
  controllerAs: name,
  controller: TemperaturesCtrl
})
  .config(config);
 
function config($stateProvider) {
  'ngInject';
  $stateProvider
    .state(name, {
      url: '/'+name,
      templateUrl: template
    });
}

this is the final result:
enter image description here

My problem concerns the definition of the controller in the lights.js page.
Reading the AngularJS documentation I was sure that in a component you have to define the controller. Then if you declare a controller in which you declare a variable, you can get it in the template (see the menu.js component).

The problem is that it is not so simple. I can find my variable that says "Hello" only if I declare the controller and the controller as in the state definition. Where am I wrong?

Here you can find the project: GitHub

Thank you for your help!

Upvotes: 2

Views: 135

Answers (0)

Related Questions