I have a NavBar Component which loads the QApi Service, the QApi Service loads the UserService, but I get the following error:
EXCEPTION: No provider for UserService! (NavBarComponent -> QApi -> UserService)
Either I simply don't get the concept of dependency injection, I made a stupid error, or this is just way to complicated compared to native development... Thanks for your help.
Here my code:
UserService:
import {Injectable} from 'angular2/core';
//import {User} from '../data-source-mocks/users';
#Injectable()
export class UserService {
public isAuthenticated = true;
}
QApi Service:
import {Injectable} from 'angular2/core';
import {UserService} from '../user/user.service';
#Injectable()
export class QApi {
constructor(private _userService: UserService) {}
}
NavBar Component:
import {Component} from 'angular2/core';
import {QApi} from '../../services/q-api/q-api';
#Component({
selector: 'nav-bar',
template: `Test NavBar`,
providers: [QApi]
})
export class NavBarComponent {
private _isAuthenticated = false;
constructor(private _QApi: QApi) {}
}
EDIT:
First of all: Thanks for alle the great answers each and every single one helped me to understand dependency injection better, especially this article: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html
I changed my QApi class to this:
import {Injectable, Inject, Injector} from 'angular2/core';
import {UserService} from '../user/user.service';
import {CardService} from '../card/card.service';
#Injectable()
export class QApi {
constructor() {
var _injector = Injector.resolveAndCreate([UserService,
CardService]);
this.userService = _injector.get(UserService);
this.cardService = _injector.get(CardService);
}
}
Now it works like I hoped it would. Cant thank you guys enough!!
Add UserService to the component providers:
#Component({
selector: 'nav-bar',
template: `Test NavBar`,
providers: [QApi, UserService] // <- add UserService here
})
export class NavBarComponent { /* ... */ }
Here are two good articles to better understand Angular2 Dependency Injection:
blog.thoughtram.io: Dependency Injection in Angular2
blog.thoughtram.io: Injecting services in services in Angular 2
In fact both previous responses are true! ;-)
You need to define the services:
Application level. Within the second parameter of the bootstrap function. It contains the list of the providers that are available for the whole application.
bootstrap(App, [UserService, QApi, ...]);
Component level. Within the providers attribute of the Component annotation. In this case, this is only configured for this component and you need to define this for each component where the QApi service.
#Component({
selector: 'nav-bar',
template: `Test NavBar`,
providers: [QApi, UserService]
})
You also mix things. I mean you can put the UserService provider at the application level and QApi at the component level. In fact what is important is that Angular can find providers for all the involved elements in the processing chaining (with dependency injection). They can come from either component level (1st) or application level (2nd).
Hope that it gives you some additional hints following alexpods and MichaelOryl great answers ;-)
Thierry
List the services in your bootstrap call (wherever you are handling that). Something like the following should work:
bootstrap(App, [UserService, QApi, COMMON_DIRECTIVES, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS]);
providers// directives added here are available to all children
Then you will have a single instance of each of those services available to the rest of your application.
I have three components in Angular Dart 2.0 which are menu,company,address.. Which is the best method to bootstrap this.. In a single main.dart file or using import of every component.dart file to main file and each one bootstrap. My code is given below please help
Menu.dart
#Component(
selector: 'menu'
)
#View(
templateUrl: 'lib/menu.html'
)
class Menu{
}
Company.dart
import 'package:angular2/angular2.dart';
#Component(
selector: 'company'
)
#View(
templateUrl: 'lib/company.html'
)
class Company{
}
How can I define the main Function
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'lib/menu.dart';
import 'lib/company.dart';
import 'lib/address.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(Menu);
bootstrap(Company);
bootstrap(Address);
}
Is this a correct method
The first argument to bootstrap() is root component of the polymer application. You probably won't create 3 independent Angular applications in your page.
Create an additional application component and pass it to bootstrap
bootstrap(Application);
If you add all code in one file or split it to a file per component is just a preference.
import "dart:html";
class ParentClass {
}
import "ParentClass";
class ChildClass extends ParentClass {
int main() {
Element e = querySelector()
}
}
Element & querySelector in ChildClass display as issues (Undefined Element & querySelector)
Is it not possible to import packages from ParentClass?
An import's scope is only the importing library.
If you import dart:html in the ParentClass library file and import the ParentClass library in another file, then the other file does not see the dart:html declarations.
There is two ways to handle that:
Preferably, just import dart:html in the other library too.
Export dart:html from the ParentClass library: add export "dart:html"; next to import "dart:html";. That way the declarations of dart:html will be available to any library importing ParentClass.
I am attempting to refactor some dart-polymer components to use the #HtmlImport annotation.
.dart
part of epimss_shared.components;
#CustomTag('associated-symptoms-form')
class AssociatedSymptomsForm extends PolymerElement {
AssociatedSymptomsForm.created() : super.created();
#override
void attached() {
super.attached();
}
}
.html
<polymer-element name='associated-symptoms-form'>
<template>
<div layout horizontal center>
<h1>Symptoms</h1>
</template>
<script type = 'application/dart' src='associated_symptoms_form.dart'></script>
</polymer-element>
library
The library epimss_shared.components; is part of the imported epimss.shared library.
#HtmlImport('../components/tooltip/tool_tip.html')
#HtmlImport('../components/misc/associated_symptoms_form.html')
library epimss_shared.components;
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:epimss_shared/epimss_shared.dart';
import 'package:epimss_shared/epimss_shared_client.dart';
part '../components/tooltip/tool_tip.dart';
part '../components/misc/associated_symptoms_form.dart';
When I attempt to use the component, the application is not displayed with the following console error:
'package:epimss_shared/components/misc/associated_symptoms_form.dart': error: line 1 pos 6: url expected
part of epimss_shared.components;
^: package:epimss_shared/components/misc/associated_symptoms_form.dart
The peculiar thing is this - if I creat a new component with a different name with everything remaining the same (as done with the tooltip component shown in the library) there is no problem at all!
It seems that previous information of the component is cached and is being reused.
Any help is appreciated.
I'm trying to work through a Google I/O codelab for the Material Design Web App, but port it to the Dart language. http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#4
I'm at the step where you toggle the drawer, but I can't figure out the dart equivalent.
The JS code to toggle the drawer looks like this:
<script>
Polymer('codelab-app', {
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
}
});
</script>
I have tried the following in my CodelabApp class, but I get a NoSuchMethodError: method not found: 'togglePanel'
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
querySelector('core-drawer-panel')..togglePanel();
}
}
my button element properly fires, but I can't figure out how to call the drawer's togglePanel method. <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
any help or direction to the proper docs would be greatly appreciated.
UPDATE:
This has been fixed in recent versions: https://github.com/dart-lang/core-elements/issues/39
Updating the polymer and core_elements libraries works as expected.
While attempting to commit my own fix to this, I discovered a temporary workaround that works in my case. Maybe will work for you :)
Add the following to the top of your file:
import 'dart:js' show JsObject;
_js(x) => new JsObject.fromBrowserObject(x);
Then change your custom tag code:
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
_js(shadowRoot.querySelector('core-drawer-panel')).callMethod('togglePanel');
}
}
For reference I found this solution by reading through the code here:
https://github.com/dart-lang/core-elements/blob/master/example/core_drawer_panel.html#L68-L81