Angular 2 routing modules interaction - javascript

I have 3 modules: SimpleCalculations, FunnyCalculations, OtherCalculations.
Each of them has routing.module.ts file, where I define their child routes and other stuff.
I want to have MainCalculation module, which child routes wold be taken from modules I've already told.
And for example I'd add common CanActivate guard to all routes in these modules.
What the right way to do it? I don't want to mess all this routes in one file.

Related

Is there a way to selectively use providers or services from one module into another instead of injecting whole module as dependency into another?

I have two angularjs modules. First module contains some services, components, styles, directive, providers and so on. Second module has its own services, components, directives and so.
I need only the styles, services and providers from module First in module Second. If i add First as a dependency in Second, whole module will load along with all components, which is not needed in Second.
So is there a way by which i can inject selectively i.e. services and providers from module First in Module Second without loading all unnecessary components and other code in angularjs 1.x ?

Combining Angular (5.2) router with angular-ui-router (angular 1.3.19)

I'm building an app that should run inside of an AngularJS (1.3.19) module.
The motivation is to reuse AngularJS' already built services and controllers by the scope() and injector() functions.
I cannot use ng-upgrade because this will require refactoring a lot of our legacy code.
Is there a way I can combine two routers for two different AngularJS modules?
We use the angular-ui-router for our AngularJS app.
When I try to change a route on the Angular router, AngularJS' router removes the route and replaces it with an empty string (and runs the otherwise() function as configured).
Any ideas?
Thanks!
I got this.
Configure your paths on both ends. AngularJS' route should point at the html of your Angular app.
Also, I created a node script that imports Angular's routes and transforms them to be AngularJS' routes.
I did this with ts-node and webpack-shell-plugin.
Thanks.

How does intermediary module providers fit into injector tree

This tutorial doesn't talk much about how modules fit in the injector tree except for the this phrase:
All requests bubble up to the root NgModule injector that we
configured with the bootstrapModule method.
Does it mean that if a provider is not found on any component up the tree, only the root module is checked and no other intermediary module is checked? For example, the picture below shows the component tree with one root component and with components 3 and 4 being declared in it's own module. The root module has it's own provider and the red module has it's own provider. When component 3 requests the service, is the provider on red module ignored and the provider on parent component checked and if not found than provider on root module is returned?
I think you are looking for https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-module-provider-visibility
Why is a service provided in a feature module visible everywhere?
Providers listed in the #NgModule.providers of a bootstrapped module
have application scope. Adding a service provider to
#NgModule.providers effectively publishes the service to the entire
application.
When we import a module, Angular adds the module's service providers
(the contents of its providers list) to the application root injector.
This makes the provider visible to every class in the application that
knows the provider's lookup token.
This is by design. Extensibility through module imports is a primary
goal of the Angular module system. Merging module providers into the
application injector makes it easy for a module library to enrich the
entire application with new services. By adding the HttpModule once,
every application component can make http requests.
However, this can feel like an unwelcome surprise if you are expecting
the module's services to be visible only to the components declared by
that feature module. If the HeroModule provides the HeroService and
the root AppModule imports HeroModule, any class that knows the
HeroService type can inject that service, not just the classes
declared in the HeroModule.
The providers of the modules are added to the root scope. Duplicates are discarded. This means the providers are found from your entire application, except when they are overridden on components or lazy loaded modules. Lazy loaded modules get their own root scope.
If the red module is lazy loaded then component 3 will get the provider from this module, if it's eagerly loaded the providers of the red module are added to the root scope of the application and component 3 will get it from there. This is all related to providers added by #NgModule()
Providers added to #Component() or #Directive() are not hoisted to any root scope. DI looks from the component that has a dependendency on its parent and its parents parent, ... for a provider and at last in the root scope of the application or in the root scope of the lazy loaded module if the component is part of one.

AngularJS - Can we remove/delete module?

I'm trying to clear memory of previous module of my app which Im not going to use after I've routed to a different location.
So for example my "WebApp" is my main angular module of my app which has dependency of "catalogApp", "PaymentApp", etc modules. I want to remove the previous module as and when I route from 1 module to another.
So, Can we remove/delete module?
I am not sure about deleting modules as such. But you can use ocLazyLoad to lazy load modules only when they are required.

Maintaining and organizing ExpressJS routes

I'm new to NodeJS and Express moving from PHP. I have been following online tutorials on how to build web apps with Express and it has been an eye opener. So I decided to work on a project with just JavaScript. Problem is after adding a few route definitions in Express, I'm having trouble keeping track of my Express routes and fear it'll get even larger with time. Currently I have almost 45 lines (yes, I have a lot of route, some serve HTML templates files and other just return JSON for my Angular frontend). Is there any better way to manage this before it gets out of hand?
One possible way of organizing the routes is to groups of routes based on functionality and then create separate modules for these groups and then, import these modules to the main app file(app.js or server.js). For example, I am working on a project that has trading functionality, cash deposit functionality and then some other common tasks. So, I have created different modules for these routes and put them in a separate directory called routes.
For example, I have a module named site.js for all the common tasks.
module.exports = function(express,app,passport,router){
router.get('/auth/facebook',passport.authenticate('facebook'));
//other commin routes
};
and in my app.js file, I declare the router and then pass in to the modules that contain routes.
var router = express.Router();
app.use('/',router);
require('./routes/site.js')(express,app,passport,router);
If you are using Express version 4, i wrote a module to handle routes in a cleaner less bloated way. Checkout Exroute Module if it fits your current needs and please provide some feedback if it doesnt.

Categories

Resources