I have built an app with Ember.js and Cordova which runs perfectly on newer devices, but is laggy on older devices.
Onsen UI works perfectly for my needs, however it is designed around Angular and I am not sure if it is even possible to implement it with Ember. (I have tried to no avail).
I have looked for using Ember and Angular together, however all I found was Angular vs. Ember debates.
The forum page of Onsen UI asks visitors to post on Stack Overflow.
I am looking for guidance on how to implement Onsen UI with Ember/Handlebars.
This is the particular demo I want to utilize http://onsenui.io/OnsenUI/demo/sliding_menu/
Ember and Angular are mutually exclusive and should not (and probably cannot) be used together. There are parts of OnsenUI that can be reused like the stylesheets but it'll be a lot of work since Angular uses directives that can be styled too.
Related
I develop in Angular 2+ for quite a while using Angular Material, but the documentation of AngularJS Material is more complete and wide then the one to Angular 2+, there is a way to use AngularJS Material components in an Angular 2+ project? More specific on Angular 6
You will have to run both frameworks simultaneously to make it work. While that certainly is possible, it usually isn't desired, especially if there isn't a clear separation between where the AngularJS application and the Angular 2+ application ends and begins (for instance as there would be if you're migration an AngularJS application to Angular 4). AngularJS components, spread around an Angular 2+ application doesn't seem like a desirable situation.
Here are some additional issues:
Component names may clash
Routing may interfere with each other
Communication between AngularJS components and Angular 2+ components is difficult
I have two suggestions.
Either do away with the AngularJS dependency and clean up after the former co-worker.
Or, create thin wrapper components around Angular2 Material components, that has the same name and signature as the AngularJS material components. This is only possible if the components work somewhat similarly.
I recommend the first suggestion, since the latter might only be plausible for the most simple components.
I am looking to build a new set of web apps, and I have been working already with Angular v1.x, Angular UI Grid 3.0 & other common components (Angular UI Bootstrap, Slider...).
Angular 2 seems mature enough to be used today, but my question is more on components I need around it:
only references I found so far of usable grids are AG Grid, and Angular UI Grid 4.0, which is not yet on tracks,
other components such as Angular UI Bootstrap are in alpha stage, and some other Angular UI project have not yet stated to be ported.
Disclaimer: I am not asking for opinions on v1.x vs v2.x here.
Not being knowledgeable on Angular 2, I would like to know:
If you are going in production today building apps on Angular 2, what is your approach?
What basic components you are using (grid, navigation, slider) and if they are v2 ready,
How difficult is it to run v1 & v2 Angular code side-by-side?
How difficult is it to use non-TypeScript components in v2?
ag-Grid is written in typescript. it is ng2 ready with regards it can work perfectly with ng2. we have just released ng2 cellRendering (so you can use angular 2 inside you cells) and are working on cellEditing (will be ready in the coming days). regards v1 and v2 side by side, i have no idea, however ag-Grid works with both ng1 and ng2, so if you have an app with ag-Grid, you will have an easier time moving from ng1 to ng2 as the grid will be the same.
not exactly your specific questions, but i think you might find this useful information.
I have old multi-page Rails website (more than 30 pages) and I'm going to implement Material design with some JavaScript effects for it. After investigations I found that Angular Material provides the most appropriate solution for me. But I'm not sure if it's good to use it, because I have multi-page site. As I understand basically Angular is used for single-page applications.
In fact I'll use only Angular Messages, Material, Animation and View features. Please advise if using such massive JS framework worth it in this case.
Angular does not need to be used only for SPAs. Here's a more in depth discussion of the topic Is AngularJS just for single-page applications (SPAs)?. That said, if all your using is messages, material and animation, those should be the only components you need to add to the project and so you shouldn't be bringing in anything more than is required, such as angular routing. Hope this helps!
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.
I've been developing a mobile app with AngularJS and zeptoJS but the combination of those two is not providing any UI widgets
I've seen this topic: Is there a UI library for angularjs for use in a phonegap app?
but I'm looking for more answers ( really, LungoJS is the only answer? and I'm not going to use jQueryMobile. ). Are there any other light libraries ?
IonicFramework is a framework designed for exactly this purpose. Its fairly modern though. As such it doesn't have much in the way of backwards compatibility.
Angular Material (currently for 1.x only)
Material Design components for Angular 2
OnsenUI - "The answer to PhoneGap UI Developement"
React Native
NativeScript Angular
Mobile Angular UI lets you use Bootstrap 3 css stripped out of desktop related media queries and Angular.js to develop mobile apps fast.
Its purpose is to achieve the same of Jquery Mobile but using Bootstrap 3 for the UI and AngularJs in place of Jquery.
It provides also other essential mobile components that are not included in Bootstrap 3 like sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll and more.
I also like TopCoat which is a CSS mobile/desktop framework that works well with Angular. See it in action with angular here: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/ and the library at http://www.topcoat.io
Check my answer here where I resumed other options for UI frameworks as well as Pros and Cons.
Including kendo UI, phone.js, chocolate chip, steroids.
Custom CSS for Mobile development using Phonegap/Cordova
Top coat and bootstrap also nice ones as already mentioned.
Maybe reconsider jQueryMobile.
Quite a few months ago we started a new project and considered all of the options listed above for a client side framework. We were looking for a large set of mobile-optimized UI widgets. A widget catalog was more important to us than whether the framework provided an MV* architecture, so tools like AngularJS, MeteorJS and EmberJS were secondary. We found jQueryMobile as the best option for us. Bootstrap, Ionic, Kendo, Sensa, etc. didn't seem to have as many and varied out-of-the-box widgets specifically for mobile. The space of mobile tools is in transition, but so far I think we made the best decision for our use case.