Question

我正在努力学习AngularJS和Meteor 我正在研究c9.io.
我正在努力实现一个简单的菜单这是我的文件夹结构：

这就是代码：
的的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
    });
}

这是最终结果：

我的问题涉及 lights.js 页面中控制器的定义阅读AngularJS文档我确信在组件中你必须定义控制器。然后，如果你声明一个控制器，你声明一个变量，你可以在模板中获取它（参见menu.js组件）。
问题是它不是那么简单。只有当我在状态定义中声明控制器和控制器时，才能找到我的变量“Hello”。我哪里错了？

在这里您可以找到该项目：GitHub
谢谢你的帮助！

角度分量问题

0 个答案: