I already wrote a big application with Angular 1 and requireJS with AMD for lazy loading and structuring. The application don't use routes but parts of the application like HTML, css and Javascript (angular modules) are lazy loaded.
Now I want to change to Angular 2 and I am looking for the best lazy loading technique for HTML, css and JS (angular) content which doesn't depends on routes and which doesn't depends on thousands of different javascript frameworks.
So lazy loading route components seems to be quite simple:
http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2
but how would you accomplish that scenario without routes?
Would you recommend something like webpack, or should I keep requireJS? Is there something like OClazyload for angular 2? Or does it work somehow with Angular 2 even without any frameworks?
I'm a friend of "keep it simple" and I really would like to keep it as small and simple as possible.
Thanks!
Angular 2 is based on web components. The easiest way ("keep it simple" as you said) is using routes and components.
You can also load components simply by using directives in your html. for example:
#Component({
selector: 'my-component', // directive name
templateUrl: './app/my.component.html',
directives: []
})
export class MyComponent {}
#Component({
selector: 'root-component', // directive name
directives: [MyComponent],
template: '<my-component></my-component>',
})
export class myComponent {}
if you modify your template to include <my-component> dynamically it will load the component dynamically. This is not a best practice.
there is a dynamic component loader for angular 2, but that is not as simple as using routes or directives. it will create an instance of a Component and attache it to a View Container located inside of the Component View of another Component instance.
with it you can use:
#Component({
selector: 'child-component',
template: 'Child'
})
class ChildComponent {
}
#Component({
selector: 'my-app',
template: 'Parent (<child id="child"></child>)'
})
class MyApp {
constructor(dcl: DynamicComponentLoader, injector: Injector) {
dcl.loadAsRoot(ChildComponent, '#child', injector);
}
}
bootstrap(MyApp);
The resulting DOM:
<my-app>
Parent (
<child id="child">Child</child>
)
</my-app>
There is another option (look at angular2 link above) in which you can optionally provide providers to configure the Injector provisioned for this Component Instance.
Hope this helps.
With angular 2 Latest version we can use loadchildren property to perform lazy loading.
For example :
{
path: 'Customer',
loadChildren: './customer.module#Customer2Module?chunkName=Customer'
},
In this above example I am using webpack Bundling(angular 2 router loader) + Anguar 2 Routing to lazy load the modules.
https://medium.com/#daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac
Lets assume we have two pages in our application, “home” and “about”. Some people might never reach the about page, so it makes sense to only serve the load of the about page to people that actually need it. This is where we will use lazy loading.
Related
I am hitting the url with GET request: http://localhost:5029/article/16
and inside node I am checking for article/16 like this:
req.url.split("article/")[1];
and trying to render the component using handlebars like this:
res.render('header', {layout: 'header.component.html'});
I see the component rendered but css styles are not loaded.
my component.ts:
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit { }
component html:
<div class="header">
<li class="menu-item">
<a [routerLinkActive]="['active']" routerLink="/home">Home</a>
</li>
<li class="menu-item">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" [routerLinkActive]="['active']">Tutorials</button>
</div>
</li>
</div>
Handlebars setup:
app.engine(
"hbs",
hbs({
extname: "html",
defaultView: "default",
layoutsDir: "../src/app/components/header/",
partialsDir: "../src/app/components/"
})
);
app.set("view engine", "hbs");
Similar requirement has been achieved here in RiotJS:
https://riot.js.org/api/#-riotrendertagname-opts
// render "my-tag" to html
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })
Not sure why you want to render a specific Angular component from node express, but I will try to explain what components are and why you can't directly load them and a better alternative on same.
As you might be already aware that, Decorators makes a specific block of code distinguish between service, component, directive etc.
Decorators are functions that are invoked with a prefixed # symbol and immediately followed by a class, parameter, method or property.
e.g
#Component({
})
export class TestComponent {}
#Injectable()
export class TestService {}
Notice the () on #Component or in #Injectable.
(These decorators need to register in some or other ngModule())
This means that the #Component is called once JavaScript encounters #Component(). In turn, this means that there must be a Component function somewhere that returns a function matching one of the decorator signatures outlined above. This is an example of the decorator factory pattern.
During Bootstrap of the application, all these functions are invoked, and compiler converts ts code in vanilla js, which is executed in the browser.
Coming back to the question what you are trying to do out there is trying to load the component without processing it with TS compiler, (Under the hood, angular is doing lots of work for us when we build or compile the application)
Possible Solution, if you don't want to serve all the components with help of angular, you can use Angular Element (Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way), which can be rendered without the need of angular directly on any page.
To learn more about same visit https://angular.io/guide/elements
Hope this helps all the best!
I'm using angular. I already know that when an appmodule is importing modules which declares providers, the root injector gets them all and the service is visible to the app - globally. (I'm not talking about lazy loaded modules)
But is it possible that each module will have its own instance of the service?
I thought of maybe something like this :
#NgModule({
providers: [AService]
})
class A {
forRoot() {
return {
ngModule: A,
providers: [AService]
}
}
forChild() {
return {
ngModule: A,
providers: [AService]
}
}
}
But I don't know if it's the right way of doing it
Question
How can I accomplish service per module ?
STACKBLITZ : from my testing , they are using the same service instance
When we provide a service in a feature module that is eagerly loaded
by our app's root module, it is available for everyone to inject. - John Papa
So looks like there is no way to inject at feature-module level, as there are no module level injectors other than the one at root module.
But angular has nodes at each component level for the injector, so such a scenario will have to use coponent level-injectors I guess.
You can also have a parent component inject the service for different children sharing the same instance.
One way is to provide the services at component level. Not sure if that will work for you.
Also, check the multiple edit scenario in the docs
https://angular-iayenb.stackblitz.io
import { Component, OnInit } from '#angular/core';
import {CounterService} from "../../counter.service"
#Component({
selector: 'c2',
templateUrl: './c2.component.html',
styleUrls: ['./c2.component.css'],
providers:[CounterService]
})
export class C2Component implements OnInit {
constructor(private s:CounterService) { }
ngOnInit() {
}
}
Question
How can I accomplish service per module ?
Not with the default Injector. Default Injector keeps nodes at root level and component level, not at feature-module level. You will have to have a custom Injector if there is a real scenario.
Edit: the previous answer from me is not completely correct. The correct way to make this work is to use lazy loaded modules, provide the services there. The given service should not be provided with a static forRoot() method somewhere because then the lazy loaded module will access the root injector.
There is no actual reference to do so because that is not how angular is designed but if you want it that way you have to the opposite of
https://angular.io/guide/singleton-services#providing-a-singleton-service
and
https://angular.io/guide/singleton-services#forroot
Old not completely correct:
You simple have to declare the service you want to be single instance for each and every module within the providers meta data of each and every module. Then Angular will not reuse any instance of the service.
Giving scenario: You have two modules, ModuleA and ModuleB, both need the service but different instance, then you will declare them in the providers section of ModuleA and ModuleB.
Reference:
https://angular.io/guide/singleton-services
I'm thinking of separating our MVC-based website's front-end into few components and I was thinking about using Angular for that purpose (e.g. creating cart application that I can include to my view afterwards).
Problem is that I need to pass few variables into that application and I'm wondering how to do that safely and professionally. I was thinking about something like:
I'm going to ng build --prod --aot
I inject all my scripts to my view
I inject variables passed to view to my app
... and "code" representation for my thoughts:
Controller:
public function viewAction()
{
$this->view->addCss('angular/app/styles.css'); // adds styles for cart app
$this->view->addJS('angular/app/scripts.js'); // adds scripts for cart app
$this->view->setJSVariable('idCustomer', 555); // sets global var idCustomer
}
View:
<!-- bunch of HTML for view ... -->
<script>
// CartApp would be an angular app.
CartApp.use([
idCustomer
]);
</script>
So my question is... would it be possible (and would it be a good solution) to get the CartApp as an object and then make some function (like use in above example) that would set/pass the data? (let's say to some globally provided service/component or anything else). Or is there any other way to do this? Like taking the variables from inside the application from the window object? (as they're going to be bound to the window anyways). Thank you.
So I was going to suggest using input bindings... I've done that before in AngularJS but was surprised to find that using input bindings on the root component isn't supported yet. You can have fun reading this giant issue: https://github.com/angular/angular/issues/1858
The best post I saw there was Rob Wormald's which had a couple of suggestions:
to the initial question, if you really want to grab data from the
root, that's possible via
https://plnkr.co/edit/nOQuXE8hMkhakDNCNR9u?p=preview - note that it's not an input (because there's no angular context outside of it to do the input...) - its a simple string attribute
which you'd need to parse yourself.
ideally though, you'd do as
#robtown suggested and actually pass the data in javascript, rather
than passing it as a DOM string and retrieving / parsing it yourself
(which has never really been a supported case in angular, despite the
explicit-warned-against usage of ng-init in angular1 to accomplish
this) - see https://plnkr.co/edit/PoSd07IBvYm1EzeA2yJR?p=preview for a
simple, testable example of how to do this.
So the 2 good options I saw were:
Add normal HTML attributes to the root component:
<app-root appData='important stuff'></app-root>
and use ElementRef to fetch them:
#Component({
selector: 'app-root'
})
export class AppComponent {
constructor(el: ElementRef) {
console.log(el.nativeElement.getAttribute('appData'));
}
}
Would probably work best if you are just dealing with strings or config flags. If you are passing JSON, you will need to manually parse it.
Have the server render the data as JavaScript and import it in your app:
Have the server render something like this to a script tag or JS file that is loaded before Angular is bootstrapped:
window.APP_DATA = { ids: [1, 2, 3] }
Tell your NgModule about it using a provider:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
providers: [{ provide: 'AppData', useValue: (<any> window).APP_DATA }],
bootstrap: [AppComponent]
})
export class AppModule { }
And then use it as a normal Angular service:
import {Component, Inject} from '#angular/core';
#Component({
selector: 'app-root'
})
export class AppComponent {
constructor(#Inject('AppData') appData) {
console.log(appData.ids);
}
}
I built an Angular 2 component and I have a doubt: is there a standard that defines if the events triggered inside the component should be broadcasted (vie #Output, for example) or the component can handle them itself?
Let me show some code:
the component may be called content-detail and the template is:
<ion-card (click)="navigate()">
<h3>{{ rawcontent.name }}</h3>
</ion-card>
the .ts has a navigate() method, and inside it I call some route (in my case it's an Ionic 2 app, which uses NavController, but it could be anything else).
#Component({
selector: 'content-detail',
templateUrl: 'content-detail.html'
})
export class ContentDataComponent {
navigate() {
//do seomething, like navigate to another page
}
}
Is this a good practice?
Or the best is that the component use EventEmitter to emit it to it's parent (as explained here, for example)
I can't find any documentation about it. What I guess is that it would be easy to test the component if it simply emit the event to the parent instead of navigate (or do anything else), because I wouldn't need to inject some router or navcontroller.
Could anyone help?
(someEvent)="someMethod()" is a common way to handle events in templates
#Output() xxx; is for communicating from child to parent
for all other scenarios use a shared service
for communication between siblings there is a shortcut using template variables
<my-a-comp #a></my-a-comp>
<my-b-comp (someEvent)="a.someMethod()"
See also https://angular.io/docs/ts/latest/cookbook/component-communication.html
you can use host listeners like :
#Component({
selector: 'content-detail',
templateUrl: 'content-detail.html'
})
export class ContentDataComponent {
#HostListener('click') onClick() {
// do navigation ...
}
}
I have written two services in Angular 2. One of those is a basic, customised class of Http with some custom functionality in (it looks basic for now, but it will be expanding):
ServerComms.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
#Injectable()
export class ServerComms {
private url = 'myservice.com/service/';
constructor (public http: Http) {
// do nothing
}
get(options) {
var req = http.get('https://' + options.name + url);
if (options.timout) {
req.timeout(options.timeout);
}
return req;
}
}
Another class, TicketService utilises this class above, and calls one of the methods in the service. This is defined below:
TicketService.ts
import {Injectable} from 'angular2/core';
import {ServerComms} from './ServerComms';
#Injectable()
export class TicketService {
constructor (private serverComms: ServerComms) {
// do nothing
}
getTickets() {
serverComms.get({
name: 'mycompany',
timeout: 15000
})
.subscribe(data => console.log(data));
}
}
However, I receive the following error whenever I try this:
"No provider for ServerComms! (App -> TicketService -> ServerComms)"
I do not understand why? Surely I do not need to inject every service that each other service relies upon? This can grow pretty tedious? This was achievable in Angular 1.x - how do I achieve the same in Angular 2?
Is this the right way to do it?
In short since injectors are defined at component level, the component that initiates the call services must see the corresponding providers. The first one (directly called) but also the other indirectly called (called by the previous service).
Let's take a sample. I have the following application:
Component AppComponent: the main component of my application that is provided when creating the Angular2 application in the bootstrap function
#Component({
selector: 'my-app',
template: `
<child></child>
`,
(...)
directives: [ ChildComponent ]
})
export class AppComponent {
}
Component ChildComponent: a sub component that will be used within the AppComponent component
#Component({
selector: 'child',
template: `
{{data | json}}<br/>
Get data
`,
(...)
})
export class ChildComponent {
constructor(service1:Service1) {
this.service1 = service1;
}
getData() {
this.data = this.service1.getData();
return false;
}
}
Two services, Service1 and Service2: Service1 is used by the ChildComponent and Service2 by Service1
#Injectable()
export class Service1 {
constructor(service2:Service2) {
this.service2 = service2;
}
getData() {
return this.service2.getData();
}
}
#Injectable()
export class Service2 {
getData() {
return [
{ message: 'message1' },
{ message: 'message2' }
];
}
}
Here is an overview of all these elements and there relations:
Application
|
AppComponent
|
ChildComponent
getData() --- Service1 --- Service2
In such application, we have three injectors:
The application injector that can be configured using the second parameter of the bootstrap function
The AppComponent injector that can be configured using the providers attribute of this component. It can "see" elements defined in the application injector. This means if a provider isn't found in this provider, it will be automatically look for into this parent injector. If not found in the latter, a "provider not found" error will be thrown.
The ChildComponent injector that will follow the same rules than the AppComponent one. To inject elements involved in the injection chain executed forr the component, providers will be looked for first in this injector, then in the AppComponent one and finally in the application one.
This means that when trying to inject the Service1 into the ChildComponent constructor, Angular2 will look into the ChildComponent injector, then into the AppComponent one and finally into the application one.
Since Service2 needs to be injected into Service1, the same resolution processing will be done: ChildComponent injector, AppComponent one and application one.
This means that both Service1 and Service2 can be specified at each level according to your needs using the providers attribute for components and the second parameter of the bootstrap function for the application injector.
This allows to share instances of dependencies for a set of elements:
If you define a provider at the application level, the correspoding created instance will be shared by the whole application (all components, all services, ...).
If you define a provider at a component level, the instance will be shared by the component itself, its sub components and all the "services" involved in the dependency chain.
So it's very powerful and you're free to organize as you want and for your needs.
Here is the corresponding plunkr so you can play with it: https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview.
This link from the Angular2 documentation could help you: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html.
Surely you do.
In Angular2, there are multiple injectors. Injectors are configured using the providers array of components. When a component has a providers array, an injector is created at that point in the tree. When components, directives, and services need to resolve their dependencies, they look up the injector tree to find them. So, we need to configure that tree with providers.
Conceptually, I like to think that there is an injector tree that overlays the component tree, but it is sparser than the component tree.
Again, conceptually, we have to configure this injector tree so that dependencies are "provided" at the appropriate places in the tree. Instead of creating a separate tree, Angular 2 reuses the component tree to do this. So even though it feels like we are configuring dependencies on the component tree, I like to think that I am configuring dependencies on the injector tree (which happens to overlay the component tree, so I have to use the components to configure it).
Clear as mud?
The reason Angular two has an injector tree is to allow for non-singleton services – i.e., the ability to create multiple instances of a particular service at different points in the injector tree. If you want Angular 1-like functionality (only singleton services), provide all of your services in your root component.
Architect your app, then go back and configure the injector tree (using components). That's how I like to think of it. If you reuse components in another project, it is very likely that the providers arrays will need to be changed, because the new project may require a different injector tree.
Well, i guess you should provide both services globally:
bootstrap(App, [service1, service2]);
or provide to component that uses them:
#Component({providers: [service1, service2]})
#Injectable decorator adds necessary metadata to track dependecies, but does not provide them.