I have a simple problem. I want to use an angularJS application I developed inside of another one. My question is: what is the best way to include it? Should I combine the app.js files and index.html files to load the appropriate resources and routes? Can I combine it by including one module in the other, like with normal dependency injection? Or is there some other, better way to do this?
Let's assume the application has a root express server and a root/app_client angularJS application. There isn't any code to post outside of my whole app, this is more of an organization question.
Related
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
I'm writing Java Web application and want to use AngularJS on frontend.
But I don't want to delegate routing and security to angular, but handle it with spring. My file hierarchy in the project looks like that:
I wrote Angular controllers, services etc. And just apply it on the jsp page with some init parameters. All jsp are loaded by Spring controllers, I have some security rules for that pages. Angular also consumes REST API from this application.
The question is about efficiency of such approach. In fact I have a few SPA in here. Every time i load a page, Angular initializes from the beginning (there is about 10 pages).
The reasons I want to stay on this version are:
It's already set (Routing, Security)
It seems like I don't need to load all the scripts on the page, but only required ones
But also I have feeling I'm doing it wrong way...
Should I separate Spring and Angular and use Angular also for routing and security handling, not only for DOM manipulation.
What do you think? Do you have any suggestion?
Angular is not another jQuery, its Single page application framework.
You can look on SPAs like on ordinary external application which communicates with your backend. So there is no view or prezentation layer on server, just REST API.
Angular app should have its own routing, it doesn't make sense to combine it with spring MVC. Security lays mostly on REST, and you can use spring security on it as ussual.
Best practice is to create Angular app as separate javascript application. You can use a lot of tools from angular ecosystem which makes your work very comfortable.
During development you have your backend running, and develop Angular part separately using javascript devstack. After that you can pack the both parts to single war.
I have nice small example of Spring and Angular integration here:
https://github.com/Angular-cz/java-devstack
Unluckilly the readme is written in Czech (beautifull language :) But if you are experienced in Java and maven you will probably get it from code, I will also try to describe it here.
The bigger app with a nice module structure and jwt autentication can bee seen here:
https://bitbucket.org/angular_cz/beerapp
Both of them has similar architecture:
separate maven module for frontend and separate for backend.
javascript part use npm as package manager
developer is using gulp task runner for javascript development (it is run inside module, where gulpfile.js resides).
there is karma runner configured and several unit tests
the app connects to the backend during development using proxy running on /api for the app can have same configuration on production)
when building war, frontend module uses frontend-maven-plugin which run gulp build task same as javascript developer would
then the built minified assets are put to resources
the next part is just ordinary maven way how to put assets to /static
one more nice thing - there is also integrated e2e test under integration-test profile.
Feel free to ask if you are interested in this kind of architecture.
Hi guys I'm looking to build an application that is a list of stores. One requirement is that for each store there is a special view of the store built in flash or javascript. This special view portion has been already built by someone else. It consists of a single HTML index file and a bunch of javascript/css in it.
So I think it would be very difficult to directly it as a part of the meteor app. What I want to do is to somehow have those special view portions be a separate entity from my meteor listing app. How can this be done? Will it need to be on different servers? Or can I just have two folders (one a meteor app folder, the other just those html+css+javascript/flash files) and have the meteor app have links point to the other folder? Any examples of meteor apps pointing to separate files but still function like a single webpage?
you can connect to another app by using DDP.connect() and it acts like REST API for websockets.
I'm new to angularJS. I managed to build a phonegap app using angularJS. The app is ok and running just fine. The problem is, now that I have a little more understanding on how angularJS works (at least I think I have), I'm worried about my app files structure and code maintainability. My project follows the angular-seed pattern. Angular Seed on GitHub where I have this structure:
js
app.js
controllers.js
directives.js
services.js
filters.js
After researching how to structure apps with angularJS, I've found some very nice articles about it: Building Huuuuuge Apps with AngularJS and HOW TO STRUCTURE LARGE ANGULARJS APPLICATIONS
My question seems very silly to me but I couldn't find a way out. I managed to separate my controllers into different files and I have now this structure:
scripts
controllers
LoginCtrl.js
HomeCtrl.js
AboutCtrl.js
ClientCtrl.js
The thing that I'm struggling with is that in the way that my app was before, I had only one controller.js file. In my index.html file, I load all the script files normally using the script tag. Now that I have 4 different .js files for my controllers, how do I load them into my index.html file? Do I have to load them all there?
It doesn't look right to me load all the scripts in the index.html file like that (I know that having one file the code will be loaded in the same way, it is just weird to me having many script tags packed there). I've found the ng-boilerplate project on github and on their index.html they load the scripts kind of dynamically. The problem is, I can't start a new ng-bolierplate right now, and I couldn't find how they did it. Sorry for the long text. Thanks!
Referencing each script file in its own tag in index.html is definitely one way to do it, and the most straightforward. However, if you want something cleaner, take a look at one of the various guides to combining Angular with RequireJS:
http://www.startersquad.com/blog/angularjs-requirejs/
Does it make sense to use Require.js with Angular.js?
This approach is aimed primarily at solving the problem of what order to load the files in order to satisfy dependencies, but it does also have the consequence of cleaning up the index.html...albeit at the cost of additional configuration elsewhere.
Use http://browserify.org/
You get very simple and elegant commonjs modules and lots of amazing libraries from node.js in your browser.
The code gets bundled into single js file.
I have a internet application mvc4 with areas, for my organization each area represent a SPA and through "Manage NuGet Package" I installed "Durandal 1.2.0", "Durandal Transitions 1.2.0" and "Durandal Router 1.2.0". I organized the folders and quit the "views" and "viewmodels" from folder "App" of Durandal and put the new views in folder "VIews" of mvc4 area for example:
Areas-->NewArea-->Views-->ControllerFolder-->views-->shell.html
Then I put the '"viewmodels" in "Script" folder for example:
Scripts-->NewArea-->ControllerFolder-->viewmodels-->shell.js
Scripts-->NewArea-->ControllerFolder-->main.js
Then I changed paths for JS of durandal, for example in main.js:
define(['../../../App/durandal/app',
'../../../App/durandal/viewLocator',
'../../../App/durandal/system',
'../../../App/durandal/plugins/router',
'../../../App/services/logger'],
And I changed main.js in the next line:
viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views');
But that configuration of folders fails because the next line calls various times the module "viewLocator" in its definition and rewrite the configuration of "useConvention" with default value:
app.setRoot('viewmodels/shell', 'entrance');
That behavior only happen when the folders "views" and "viewmodels" don't stay under "App" folder of "Durandal".
Please help me, how to have various SPAs in the same project?
You might want to consider your deployment strategy. For example, if you need to optimize this app, both SPAs will end up in the same file. However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.
In more advanced scenarios, you may create a "bootstrapper" app that loads one or another of the SPAs. The bootstrapper would contain code that is common to both SPAs. But each SPA (and the bootstrapper) can be optimized independently.
There are many options. Mainly, consider your final deployment strategy and that will help guide you here.
Also, the issue you have above is probably related to the fact that the standard conventions may not work in your setup, and you would need to override some functions with your own mapping.
I ran into the exact same problem this morning. I originally formatted the project to be:
app/spa1/viewmodels
app/spa1/views
app/spa2/viewmodels
app/spa2/views
Using this structure I hit the exact same wall you did. After reading your post, I restructured the project to be:
app/viewmodels/spa1
app/viewmodels/spa2
app/views/spa1
app/views/spa2
Using this structure, navigation works fine. I set up three SPAS and was able to navigate all three. The other benefit of this structure is that you are now following the standard convention so you don't have to configure the view locator. Just make sure the main.js file for each spa uses:
app.setRoot('view models/spa1/shell), app.setRoot('view models/spa2/shell), etc.
Finally, by structuring this way, you move the main.js files up the structure which eliminates the ../../../ in all your defines.
I hope this helps.