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.
Related
I'm working on an Angular 5 project (which I generated with the Angular CLI), using Bower for front-end dependencies. All the dependencies I need for my project are custom polymer components. I originally was able to get this project to work by using the Origami project, however I'm finding that I'd rather not use the project if possible since Polymer 2 and Angular 5 are meant to work quite well together now. The only place I've used the Origami project is in app.module.ts, where I import the PolymerModule from #codebakery/origami like so:
app.module.ts:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { HttpModule } from '#angular/http';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { PolymerModule } from '#codebakery/origami';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AnalysisComponent } from './analysis/analysis.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SemtkService } from './services/semtk.service';
#NgModule({
declarations: [
AppComponent,
AnalysisComponent,
DashboardComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
imports: [
HttpModule,
BrowserModule,
AppRoutingModule,
FormsModule,
PolymerModule.forRoot() // Only import .forRoot() once and at the highest level
],
providers: [ SemtkService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
In trying to delete the origami project, I've commented out the line PolymerModule.forRoot(), from the imports array. When I do this, the Polymer components seem to loose their styling.
Here is the page WITH the PolymerModule.forRoot() import:
page WITH import
And here is the page WITHOUT the import:
page WITHOUT import
Any ideas about what I could do to fix this would be welcome - thanks!
Author of Origami here, there's a service the library provides at the application root that registers Angular component styles with ShadyCSS (needed for #apply mixin support for all browsers and custom properties for browsers that don't support them).
https://github.com/hotforfeature/origami/blob/v2/origami/src/style/shared-styles-host.ts
You could either include that one service and provide it at your app's root, or write your own service that does something similar. Once Angular's styles are registered with ShadyCSS, any variables/mixins you define in Angular will be applied in Polymer.
I have a big application using Dart (1.24.2) and angular dart (3.1.0).
I decided to split the application into two packages: the first is a foundation layer and the second is the true application package. The idea is to be able to reuse the foundation layer in other projects.
In the foundation layer I use several services (providers) that are global to the application and are widely used.
Now, in the application layer I had the need to add some fields to some services.
The problem I had is that you cannot use a component of the foundation layer that uses a service modified. The message that I get is: "EXCEPTION: No provider found for ."
I cannot say that this is bug, but It would be helpful in creating angular modules.
An example.
I have generated (from Webstorm) an example application using Angular2: The Todo list application.
Given this, I Have modified a little bit the "src/todo_list/todo_list_component.dart" source removing the TodoListService provider.
//providers: const [TodoListService],
and moving the declaration into the AppComponent class:
import 'src/todo_list/todo_list_service.dart';
// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components
#Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [materialDirectives, TodoListComponent],
providers: const [materialProviders, TodoListService],
)
class AppComponent {
This way the service is global to all components call by AppComponent.
Then I have generated a second project, always a TodoList example and made the same modifications as in the previous (globalizing the TodoListService).
Now, in the derived package I did the following:
Added a reference to the foundation layer package;
Cancelled the src/todo_list/todo_list_component.dart, .css and .html.
This because I want to use the foundation layer package TodoList component.
Added a field to the TodoListService:
import 'package:angular2/core.dart';
import 'package:angular_inject_subclass_base/src/todo_list/todo_list_service.dart' as base;
/// Mock service emulating access to a to-do list stored on a server.
#Injectable()
class TodoListService extends base.TodoListService {
String description;
}
Last modification, in the AppComponent source, I changed the reference to the TodoListComponent of the foundation layer:
import 'package:angular_inject_subclass_base/src/todo_list/todo_list_component.dart';
Trying to run the derived project I got the following error:
(anonymous function) EXCEPTION: No provider found for TodoListService. STACKTRACE:
0 _EmptyInjector.get (package:angular2/src/core/di/injector.dart:54:7)
1 _MapInjector.get (package:angular2/src/core/di/injector.dart:73:52) 2 ReflectiveInjectorImpl._getByKeyDefault (package:angular2/src/core/di/reflective_injector.dart:816:18)
3 ReflectiveInjectorImpl._getByKey (package:angular2/src/core/di/reflective_injector.dart:782:14)
4 ReflectiveInjectorImpl.get (package:angular2/src/core/di/reflective_injector.dart:529:17)
5 AppView.injectorGet (package:angular2/src/core/linker/app_view.dart:236:37)
6 DebugAppView.injectorGet (package:angular2/src/debug/debug_app_view.dart:98:31)
7 ViewAppComponent0.build (package:angular_inject_subclass_derived/app_component.template.dart:90:71)
8 AppView.create (package:angular2/src/core/linker/app_view.dart:180:12)
Is there any other way of doing this?
Is it possible to change this behavior in Angular so that also a subclass of the provider can be injected instead of the original one?
You can provide subclasses using
providers: const [
materialProviders,
const Provider(base.TodoListService, useClass: TodoListService)
],
then when some class depends on base.TodoListService, Angular will inject the subclass TodoListService which will be compatible with the called constructor because it is a subclass.
TodoListService alone is a short form (that will probably discontinued in Angular 5) for const Provider(TodoListService, useClass: TodoListService)
i have a sample mvc5 project and i used my first angular 2 modules successfully on this project. now i want to create new module inside my mvc areas. so i created new area with a .tsfile named app.components in my area solution! like what you see below:
import { Component } from '#angular/core';
#Component({
selector: 'area-app',
template:`<p>imanArea</p>`
})
export class areacomponent {<<bring below error!!!!!!!!!!!
name = 'dd';
}
experimental support for decorators is a feature
that is subject to change in a future release. set the
'experimentaldecorators' option to remove this warning
and second is from my root project rootproj/app/app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { AppComponent } from './app.component';
***below error for this line***
import { AreaAppComponent } from './Areas/SampleArea/app/app.areacomponent'
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Cannot find module'./Areas/SampleArea/app/app.areacomponent'
i checked my path and file names!! every thing is right but it doesn't find my path!
for more information i have to say all my essential angular files are in my root project and my app.module is inside a folder named app
means: rootProj/app/app.module and rootProj/app/app.component.spec
is it possible to use angular2 and mvc-Area together in one project?? i didnt find any source about that.
I actually use WebAPI to use Angular 2.
Back and Front-End are going to be in different project folders. And you will work with restful services.
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.
Im new with this language and this framework, Ive made a command-line app and it works perfectly and now I wanna make a very simple web interface
I have this in my .html
<body ng-app>
.
.
.
<input type="submit" ng-click="doSomething()">
In my .dart
import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
.
.
.
void doSomething(){
lotToDo;
}
And I get this
Property 'doSomething' is not of type function.
Whats the point of the error ? Its necesary to use a controller ?
Thanks to all !
You need a controller that contains the doSomething() method.
See https://github.com/angular/angular.dart.tutorial/blob/master/Chapter_03/lib/recipe_book.dart for example.
The index.html has a tag <body recipe-book> tag. Angular applies the controller declared in recipe_book.dart here because this controller has the selector selector: '[recipe-book]' assigned which is a tag that has the attribute recipe-book.
You also need to initialize a module so Angular knows of this controller.
library recipe_book;
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular_dart_demo/rating/rating_component.dart';
import 'package:angular_dart_demo/recipe_book.dart';
class MyAppModule extends Module {
MyAppModule() {
type(RecipeBookController); // register controller in a module
type(RatingComponent); // register some other component
}
}
void main() {
applicationFactory()
.addModule(new MyAppModule()) // tell angular to use the modul declared above
.run();
}
My advice: work through this tutorial before trying random things https://angulardart.org/tutorial/