Global routing between angular modules - javascript

I'm using Angular2 in my project and I have several modules.
I have base module which is called BaseModule
And have for example two (or more) extra modules - FirstModule and SecondModule.
Each module has his own routing. BaseModule has basic routes for system,
FirstModule and SecondModule has his own separated routes.
BUT
I want to create routes like
/user/10/profile
Where ProfileComponent for user contains into FirstModule
Another examples
/user/10/stories
Where StoriesComponent for user contains into FirstModule
/user/10/news
Where NewsComponent for user contains into SecondModule!!!!
But Angular Router allow only routes like:
/firstmodule/......
/secondmodule/......
So, they should be grouped by module.
I want to do it with modules because I want to have async(lazy) loaded parts of my application.
As I know Angular disallow variants when we async(lazy) load components.
Anybody have ideas how I can create what I want?

For routes in root module define your roots as RouterModule.forRoot(['']) and for routes in the other modules use RouterModule.forChild(['']). Since your child modules will be in the imports of the parent this will route properly.

Related

Angular 8 normal loading module

I am working on an angular application that has 3 modules, root module auth module, and dashboard module. In my root module routing file I load auth and dashboard module using load children approach however dashboard module almost always load first when the user is logged in so I don't want to lazy load my dashboard module.
I search a day and looking for a solution I looked in the angular document to find a way to normal load a module however the only things I found was Angular switch from lazyLoading to 'normal' loading question which the answer doesn't work in aot compile production mode and I got this error
Error: Runtime compiler is not loaded
So how can I normal load my dashboard module in angular?
If you dont want lazy loading, remove the route corresponding to the load children from the root routing module. Instead place the import statement of the feature module(in your case auth and dashboard module) before the root routing module import. Angular will compile your feature module since it is in the imports array(not lazy load). Since the order matters, the routes in the feature module will be hit first rendering the feature modules' components.
I suggest you to read the documentation for routing and navigation from the official docs

how to use a module in another module and route that in angular 8?

How can I use a module in another module in angular 8? I would like create an application that use a modules in another module. is it possible? if yes how can I route from a link to this modules?
I build a menu module and inside that some components as menus. any menu refer to a new area that I want be a module. how can I do this?
the structure is:
menu(module)
-first menu(component)
an area(module)
some components
...
-second menu(component)
...
Normally you will need to lazy load module
So what you need to do is
Create a desire module you want to have in your app and include component you need
Then add default route for that module
Lazy load that module in your main app.routing.ts
Add routeroutlet in your view to navigate to that route moudule

How to create a scalable Angular application structure?

I'm creating an Angular 6 application that will serve two types of users.
A buyer and a seller. I want each one of them to have their own GUI. How would you structure your application? taking into account that both theses GUIs have many components that they can share.
I was thinking something like creating 3 modules /buyer , /seller and /shared
I will also be using an auth guard so when authenticating the buyer can only access their GUI , etc ...
I'm new to Angular so any help will be appreciated!
thank you.
Yes, a buyer module containing all the components for the buyer,
a seller module containing all the components for the seller
and a shared module containing all components/services/models used in both buyer & seller module.
This is only the first layer, depending on how big your application is you will need more levels of modules.
The offcial Angular styleguide is a good point to start, you can find it here.
For more about application structure you can look here in the styleguide.
Create 3 separate module with main module and put common things in main module or create one shared module and import where you want to access.
also use SCSS for styling and create one separate folder for sass and write all the basic files and things in scss
You can also create separate folder in asstes for mock-data
Your project structure would be something like that:
app/
core/
shared/
assets/
mock-data/
sass/

add third party module in angularjs

I need a third party module in my angular app for the specific page only so i dont want to load those js files when they are not required
currently code is like this
angular.module('app', ['othermodule']);
but i want it like
angular.module('app',['']).
controller('ctrl'['module',function(module){
}]);
or any similar alternatives. How can modules be loaded conditionally ?
The first thing you will need to do is break your angular modules out into their own files. A simple example would be a seperate app.js that handles creating the app and routing, then controller.js and factory.js. Once you have a seperate file for each module you create the module with this syntax
angular.module('myapp.functionName.type', ['inject your custom module here'])
.whatever (controller, value, factory, etc)
You would then inject the myapp.functionName.type into the app.js

Express js require() followed by funtion(app)

Im fairly new to Nodejs and express, I was looking through some tutorials and examples and stumbled across
this inside app.js
var router = require('./router')(app);
What is the purpose of doing this?
This is whats inside the router file
module.exports = function (app) {
// The signup route
app.use('/signup', require('./routes/signup'));
}
You import your routers from another file.
This is a technique for scaffolding. Models, views, controllers and routers are kept in different files and then you import them into a main.js with require().
You create your project modular, it's more easy to scale and develop with team.
This is a popular modular pattern in javascript, often seen in node. Here's what you gain:
You can modularize your code into separate files so you don't end up with big monolith chunks of code.
By requiring the module as a function, you can pass some variable constants (such as the application config, or a datatbase entry point).
You can choose what to expose, and what to keep private by using module.exports which cleans up the global object for the application.
In the code snippet you provided, your passing the app config to the routes file, where you are creating a route that is reliant on the variable. If that route relied on interior logic, that logic could be scoped to the routes.js file rather than be exposed to the rest of the application.

Categories