How to use ons-navigator with React.js - onsen-ui

I want to use Onsen UI 2.0 with React.
In Onsen UI 2.0's reference, var which is Attributes of ons-navigator is used to refer navigator.
But, var can be used with only Angular. So my question is how to refer navigator with React.

to access elements in React use ref https://facebook.github.io/react/docs/more-about-refs.html.
That being said, unfortunately Onsen 2.0 is still in the beta and does not work well with ons-navigator, yet. Hopefully in later versions it will, you can follow https://onsen.io/blog/ for updates.

Related

Angular 2 maturity: going in prod with usable 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.

can i use angularjs 1.4, angularjs 2.0, reactjs in one project

My project is a hub of tags that called in different name in different languages.
I call views of this components.
Currently users are using angular 1.4 to make views.
I want to give flexibility to user that can make angular 1.4, angular 2.0 components and reactjs components.
I do not want to upgrade users 1.4 directive to angularjs 2.0 components.
So is there any way i can use angular 1.4,2.0 and react js in one project without any problem
Very short answer: no, you can't run two versions of angular within the same website. The problem is only one version can control the DOM, and there are issues with the global var 'angular' as well (when using two different versions of angular 1.x).
Currently, using iframes are your best option (I know, iew...). In the future, new web components like shadow dom might solve this issue, but browser support is still quite low.
I warmly suggest you not to mix the different technologies (1.4 - 2.0)
Better pick just one and follow it.
If you would like to develop new components with 2.0 but you don't want to migrate all, I suggest you to port your code to 1.5 (less effort) and then use the components.
I hope it helps.

Angular Material for multi-page website

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!

Polymer's Paper Elements & Angular Material

Please help me understand the following quotes from the Angular Material github and home page:
This project is in early pre-release. Angular Material is both a reference implementation of Material Design and a complementary effort to the Polymer project's Paper Elements collection.
The Angular Material Design project is a reference implementation effort similar to that provided in the Polymer project's Paper elements collection. This project provides a set of AngularJS UI elements that implement the material design system.
I understand that Polymer is a framework for web components, and that one piece of the project is the collection of paper elements. I do not understand how the two are related, or why Google is developing two strikingly similar, yet different projects.
Is angular material simply a port of Paper Elements to angular?
Are web developers to use Angular Material right alongside Paper Elements in their web apps?
Are the two eventually going to effectively become equivalent? (Angular Material being used by AngularJS developers & Paper Elements used by others?)
I think you should consider the fact that web components, polymer, material design, paper elements and angular are 5 distinct 'things'.
Web components is a group of 4 standards.
Polymer is a sugar syntax api on top of web components + some nice additional features.
Material Design is the latest style and interaction guide Google has announced and they are
replicating more consistently across all their interfaces..web/mobile/etc.
Paper Elements are just an implementation of material design using Polymer. At the ChromeDev Summit Polymer team commented they plan to move paper elements into its own domain to avoid the confusion. Same things about the polyfills, these have been moved to webcomponents.org.
Angular is a library with a much wider scope than polymer.
Angular Material is just another implementation of material design using Angular.
My point being...material design will be reimplemented in as many flavors Google has to generate interfaces.
Google has a history of competing projects. But Angular's team has announced they will be using web components as well in their 2.0 version which is on the works right now. Will they use polymer to create directives? who knows? maybe..
From the recent ng-conf 2015 announcements it's clear that Angular 2.0 will have a new syntax and implementation to write Web Components spec based Custom Components (Directives).
Also, Angular-Material team has announced that post 1.0, they'll be porting it to Angular 2.0.
Hence, integration of Angular-Material and Polymer isn't in sight...Though, the good thing is that coz they're both based on Web Component Spec, they play well together, meaning that either can be used in an Angular App...

Using Onsen UI with an ember app

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.

Resources