After reading some nice stuff about angularJS 1.5 components, I'am trying to start using it. I did a simple test trying to have a "Hello world!" component with the "world" being a binding. I would like to use ngRoute to pass that data to the component, but I didn't manage to do it. I searched but didn't find a solution.
Here's the code:
var app = angular.module('app', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<component1></component1>',
resolve: {
name: 'world'
}
});
});
app.component('component1',{
template: '<h1>Hello {{$ctrl.name}}!',
bindings: {
name: "@"
}
});
I tried with different bindings like "<" and "=" without success. Please also note that it is working if I pass the variable in the template like this:
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<component1 name="world"></component1>'
});
});
Here's a plunker that reproduces the issue I have: https://plnkr.co/edit/Aq9wbUi6rZe4hFoFOa31?p=preview
Your help would be highly appreciated ;)
Cheers, Jerebenz
If you read the documentation, you should understand that
$resolve
variable.So the code should be
var app = angular.module('app', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<component1 name="{{ $resolve.name }}"></component1>',
resolve: {
name: function() { return 'world'; }
}
});
});
app.component('component1',{
template: '<h1>Hello {{$ctrl.name}}!',
bindings: {
name: "@"
}
});
See https://plnkr.co/edit/rMx2SymR6GXT51Souxgt?p=preview for a demo.