Reputation: 45
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:
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
});
}
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