We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
I am working in a project which is developed using AngularJS1.2, since it is older I am thinking to write feature modules in separate app using Angular and then with the help of Microfrontend thinking to combine with older app. To achieve this, I am not able to get a good source/guide. Can anyone please help me.
I see 3 ways but haven't tried any of them though. So, I don't have any working solution.
Have a route from angularjs that points to angular app(full page load) and everything from there onwards, angular handles everything. There is no angularjs involved. This may not be the best option.
Let angular code load on demand when the feature is required and provide placeholders for the angular features inside angularjs project. This way you can share custom scope to nested child angular project.
Use web components developed in angular(angular elements) and use them in your angularjs application. They work independent of technology/framework/library.
I'm working on a Cordova application using AngularJS and OnsenUI. I'm having trouble with the documentation that's out there with respects to the call to ons.bootstrap().
Specifically, I am used to manually bootstrapping AngularJS applications in Cordova when needed -- i.e., either when the DOM loads, if I'm in a browser, or when the deviceready event fires, if I'm on a device, with a call to angular.bootstrap(document, [ 'myApp' ]).
I noticed that in Onsen, there's a necessary call to ons.bootstrap, with or without other parameters, such as ons.bootstrap('myApp', [...dependencies...]). I have fiddled around with this, and it seems like the only way I can get Onsen injected is if I use its bootstrapping call. However, elsewhere in my application's file, I'm still using the angular definitions (e.g., angular.module('myApp', [...dependencies...]).config(...).run(...)) and so forth.
I've found several things of questionable implementation, and haven't been able to find a definitive answer online as to this:
1) If I call angular.bootstrap within my initialization, Onsen never loads
2) If I use the ons.bootstrap call, things seem to work, but I end up repeating my dependencies within the bootstrapping call as well as my application definition using angular. This redundancy seems bad to me.
3) If I use both calls (not unexpectedly), I get a isWebView() already defined error, and the application goes nowhere.
Unfortunately, all of the examples on the Onsen website assumes all code (HTML, JS, etc.) like to reside in one spot, and doesn't seem to take Cordova into account. I've used Onsen in the past, but several versions ago, and the old methods of injection no longer seem to work.
So my question is, what is the way you're supposed to bootstrap and use Onsen, Angular, and Cordova together? Alternatively, is there a good example somewhere that doesn't involve Monaca?
Thanks in advance.
Of course there are good examples somewhere. Have you tried with the basic Onsen UI templates? They are provided in the 'Getting started' guide of Onsen UI and answer all your questions: http://onsen.io/download.html#download-templates
In short, Onsen UI is independent from Monaca and the only difference will be including Monaca's loader.js in your index.html (what includes OnsenUI, AngularJS, Cordova, etc.), or including all the libraries separately.
Also, ons.bootstrap() is optional, you can use angular.module('app', ['onsen']) if you want.
It is possible to use Cordova as well, you just need to include Cordova files as you would do in any other Cordova application. You can see it in the templates.
There are many examples out there with all of this, like the basic templates. More examples:
Onsen UI's Github: https://github.com/OnsenUI/OnsenUI/tree/master/demo
Onsen UI's blog: http://onsen.io/blog/developing-hybrid-mobile-apps-with-onsen-ui/
Hope it helps.
Well, for some reason, the only way I can get this thing to initialize appropriately is by using the Onsen bootstrap method and having it load all dependencies. Since ons.bootstrap() returns the Angular module, I'll use that for now.
So essentially, on the Cordova deviceready event, I call:
angular.module('myApp.controllers', []);
angular.module('myApp.services', []);
ons.bootstrap('myApp', [ ...dependencies... ]);
And yes, there are plenty of examples out there, but the ones that incorporate Cordova and exercise a reasonable organizational facsimile of how actual code would be used, being that different objects are defined within different files, in multiple folders, are quite lacking. Although admittedly by Google-Fu isn't necessarily great.
Thank you for your response.
Currently I'm looking for a plugin/js that I can use to show my users a small walkthrough of my site. I have jquery and angular both running on my page.
I have been using Chardin.js (https://github.com/heelhook/chardin.js). This plugin works and is simple, however when i try to include angular elements chardin.js will not be able to find the elements to display.
SO I'm trying to find a way to integrate this plugin with angular. Unless there are some better plugins that work better for this in angular. Thanks!
I agree with #Ben_Coding,
Angular-Intro is pretty good, light-weight, and no dependency on jQuery.
I'm having a hard time setting up a project with angular and foundation 3 (rails in backend). So I have been searching a lot but there aren't many results.
I'm serving angular from a subfolder (localhost:3000/app), and started the html something like this
!!!5
%html{ "ng-app" => "App" }
%head
-# I tried this for html5 url on angular, not so much help so far
%base{:href => "/app/"}
%title
NG APP
...
%body
%header
...
%main
= yield
%footer
...
= javascript_include_tag "application"
= yield :javascripts
A couple of view work just fine. But when I tried to use the foundations tab, I could make work, because angular pass the anchor as a url that shold be check against $routeProvider.
So, I check some question here, and part of the answers give me the impression that foundation work fine enabling html5 mode in angular. (Which I could make it) and other answers say that in order to make work foundation with angular should write a directive for every component on foundation. Or the last case is moving to Twitter Bootstrap.
So, I can find a unified answer, could you please, confirm if right now I can use foundation with angular in a direct way. Thanks.
The best choice would be wrapping Foundation plugins in angular services or using only CSS/SASS provided with the framework and recreating the behaviour from scratch. Focus on prototyping using markup + stylesheets and then create logic in the angular way. At least, this is what I would do if I needed / had to use Foundation.
Twitter Bootstrap works in a similar way and the only advantage of moving to this framework is the fact that you can find plenty of angular modules / directives wrapping available plugins. In this case you wouldn't have to do the same job twice and well.
Take a look here: http://mgcrea.github.io/angular-strap/ in the first place.
Then look for bootstrap-based components in Bower.io Components Directory
Also, as some people in the comments have mentioned, you might need to bootstrap you application manually, which is as simple as wrapping you app in a module and running:
angular.bootstrap(element[, modules]);
// http://docs.angularjs.org/api/angular.bootstrap
As I said, it's usually better not to reinvent the wheel.
Edit:
There's an interesting discussion on Google Groups regarding this topic (and unsurprisingly users' conclusions are quite similar): https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ
Here is an almost complete adaptation of the Angular UI Bootstrap components to the Foundation CSS: http://madmimi.github.io/angular-foundation/.
You can use the angular-ui-foundation library on github, its probably the best place to start from,
https://github.com/mhayes/angular-ui-foundation