With ES5, I realize that most people include all their components with HTML tags like <script src="app/listCtrl.js"></script> and attach the component in the same file it is declared.
This is not so straightforward with ES6 imports because imports are hoisted and that causes the Angular module to be undefined when a imported file is trying to attach the component.
What I have done that works is to import the components and attach them components in main module file.
import sidebarDirective from 'app/sidebar/sidebarDirective.js';
angular.module('courseSelector')
.directive('sidebar', sidebarDirective)
...
However, this is no better than just using HTML, if I have a "feature" that is multiple components, such as in John Papa's example:
Is there a more elegant solution, which allows me to not have to attach all the components with one file?
been struggling for a while. Thanks
UPDATE
John Papa does tend to lean towards fewer Angular modules in this seed. The image above is from the blog post, Angular Structure: Refactoring for growth. However, in that post, he also writes
When i see common functionality that can be extracted and re-used, I like to break that out into its own module. In the structure by feature notice that I have a common folder. In there I have another module named common that contains logging, progress bars, and other common features. Sometimes I break this out such that the modules are the first folder under the app folder.
What I did was to create for each component an own angular module, so that they are really decoupled and dependencies are handled on module level between components.
I made two little example components hello and main in my boilerplate project: https://github.com/FlorianTopf/angular-seed/tree/master/src.
Have a look into these demo components and the main application module.
Related
probably I have a conceptual error regarding Module Federation. What I am trying to do is create a "shared project" (reactcore) that loads react, react-dom, MUI, etc, but not any specific UI. and the other UI's (diverse widgets) that I want to load will reuse the react and other dependencies offered by the core (use the core just as a library provider).
what I got is that if load both scripts (mpreactcore and mpwidgets, the one with the UI) it works, but react and react-core are being loaded TWICE.
[![screenshot][1]][1]
[1]: https://i.stack.imgur.com/rXEYB.png
I am wondering if I am trying to use Module Federation the wrong way. perhaps it is mandatory that the "core" should be a "shell" and all the other widgets should be injected in the shell, for example, passing a parameter when creating a single App component? my approach is due to the fact that my widgets are loosely coupled, more like a library of utilitarian widgets rather than a massive unified UI.
thanks for your recommendations.
I have to include a third party widget into my React+TS app.
The widget is shipped in a minified js file and according to their documentation it can be included in a script tag or through e.g. requireJS.
What I cannot wrap my head around is that - as far as I understand - both methods above include the widget at runtime as window.Widget. However, I would like to interact with the widget from my TypeScript code as it exposed different methods.
Is that at all possible? Obviously, I could include my own logic outside TS/React, but I'd prefer to keep it inside.
If that's not possible, is there another way I could communicate with the widget other than maybe through my server?
Apologies if this is a stupid question, I'm a bit stuck right now!
Ok, so I feel pretty stupid. It turns out, I can download the minified js file and just import it into my project. It doesn't have any types, but it works.
import * as Widget from "../lib/widget.min";
So the question is if it is possible to split a React app into two different separate apps hosted on two different hosts, where the app A is a kind of a frame which controls the app B and C in the future. I have a problem, where I would like to make a common fundament for both apps (the A app) and then load two other as a content of it. It would be as if I had lazy loading with a bundle fetched from a different place. I was thinking about three main possibilities:
Iframe
Single SPA project from github
using ReactDOM.render method
I am not sure if it is possible at all, beacuse there still may be a problem with React Router - does the inside app have access to manipulate the browser routing?
It is quite possible to split your react Application into multiple smaller react applications.
Suppose you have a react application such as an e-commerce platform . You can choose to write the cart Page using a separate react-App and the products page using another separate react app and integrate them together using Module Federation Plugin webpack/lib/container/ModuleFederationPlugin.
A good reason to do something like that would be to develop different parts of your application in isolation ..and they can be taken care by different teams altogether.
There is a udemy course that teaches you exactly that. Very much recommended. You can make react dependency as singleton to avoid several installs of react.
All 3 of these options you've stated are valid and can be used to share components but there are few disadvantages to each one, for example- iFrames makes it hard to create responsiveness, ReactDOM splits your app so that the different parts won't have the same global scope...
Module-Federation is the best and most efficient way to share remote components that i know of, here is a github link to a basic project.
The MF plugin makes use of webpack's abilities, which means that the shared components are being consumed as runtime objects of the app's scope, rather then as a promise of an iframe.
NOTE: Debugging and updating a Module Federation project is a much deeper task then debugging a create-react-app application, you'll need to share dependencies correctly and remember to update desired changes at all the right places all the time.
This is not possible. Each react app can only have a single package.json in the hierarchy. if you nest it, the app will fail and say you have several installs of react. what you should do is think more react minded and objecty. You can have a folder for common components to share inside src/. You can also have src/A which is one "app". src/B which is another.
What you described in your question is exactly what you should do, just dont think of it as a react app separation, rather a seperation of component and app inside the src folder. App A can be comprised of components from /components as well as App B.
I've been messing around with Angular and i wanted to split all the files up according to their role in my app.
I want a folder for each "page" like /home or /products and take care of everything within their respective folder(It sounded like a great idea).
However, now i'm not sure how to approach loading these files in or even where to do it.
This is my current file structure:
Due to certain limitations im not able to use other helpful tools, this needs to happen in the code directly.
What would be the best way to approach this?
1st part of your question:
There's no default way to organise your angular app.
However, there are some guidelines. I keep thanking myself for reading the Angular 1 app-structuring-guidelines by John Pappa which enlightened me on the same question you are asking.
At the moment, I have organised all my apps in a folder-by-functionality apprach rather than a folder-by-type one (i.e. all controllers in a controllers folder, all services in a services folder,etc).
2nd part of your question:
Just use Gulp or Grunt and then import the single file in your index
The Web is getting more and more component oriented, now all the most famous frontend frameworks adopt a reusable component policy (React and Angular 2 relies heavily on it)
If you want your angular app to be as modular as possible, you have to put everything regarding a component in a separate folder (html templates,css styles and js logic),and split the shared logic between services and assets
In Your case an example of project structure could be:
app/
assets/
//put here images,fonts and shared styles
services/
apiService.js
utilsService.js
etc etc ...
components
home/
home.js
home.css
home.html
products/
products.js
products.css
products.html
etc etc/...
index.js
index.html
In getting used to module patterns and components I am trying to figure a better way to style an angular app. A question that I cannot explain to myself fully is...
What is the difference between a component and a module in angular js?
Components have life cycles. With the exception of children they seemingly stand alone.
From the Angular documentation:
A Module is "a container for the different parts of your app – controllers, services, filters, directives, etc."
A Component is "a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure."
Components are supported from Angular 1.5 on and are provided as a way to bridge the gap between the Angular 1 approach and the Angular 2 approach.
You can think of the Module as the library that holds all of your components. For example, imagine you have a set of components for displaying information about restaurants. You may have a location component, details component, menu component, etc. You would put all of these components in your Restaurant Module. Then users could import your Restaurant Module and have access to all the cool Restaurant components.
When I discovered Components I actually had trouble differentiating them from Directives. Although, the Angular docs do provide a good comparison table here:
https://docs.angularjs.org/guide/component