coatue-oss / Angular2react
Licence: other
One line of code to turn any Angular 1 Component into a React Component
Stars: ✭ 116
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular2react
Ng Boot Oauth
oauth2 demo with angularjs and springboot
Stars: ✭ 99 (-14.66%)
Mutual labels: angularjs
Angular To React Redux
Angular to React/Redux, a Guide for Angular v1 Experts Looking to Learn React/Redux
Stars: ✭ 109 (-6.03%)
Mutual labels: angularjs
Meanstackjs
Mean Stack JS - MongoDB, Express JS, Angular JS & Node JS
Stars: ✭ 104 (-10.34%)
Mutual labels: angularjs
Hello Worlds
Hello world apps for angular, react, svelte, and vue
Stars: ✭ 98 (-15.52%)
Mutual labels: angularjs
Mobiscroll
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Stars: ✭ 1,510 (+1201.72%)
Mutual labels: angularjs
Angular1 Apollo
AngularJS integration for the Apollo Client
Stars: ✭ 108 (-6.9%)
Mutual labels: angularjs
Opennote
OpenNote was built to be an open web-based alternative to Microsoft OneNote (T) and EverNote.
Stars: ✭ 1,489 (+1183.62%)
Mutual labels: angularjs
Mean Stack Angular5 Crud
MEAN Stack (Angular 5) CRUD Web Application Example
Stars: ✭ 107 (-7.76%)
Mutual labels: angularjs
Viser
viser is a toolkit fit for data vis engineer. https://viserjs.gitee.io/
Stars: ✭ 1,536 (+1224.14%)
Mutual labels: angularjs
Coreui Angularjs
CoreUI AngularJS is free AngularJS admin template based on Bootstrap 4
Stars: ✭ 101 (-12.93%)
Mutual labels: angularjs
Staradmin Free Angular Admin Template
Star Admin Angular Admin is a free admin template based on Bootstrap 4 and Angular
Stars: ✭ 112 (-3.45%)
Mutual labels: angularjs
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (-15.52%)
Mutual labels: angularjs
Frontpress
⚡️ A full front-end AngularJS template for WordPress Rest API.
Stars: ✭ 109 (-6.03%)
Mutual labels: angularjs
Twital
Twital is a "plugin" for Twig that adds some sugar syntax, which makes its templates similar to PHPTal or VueJS.
Stars: ✭ 116 (+0%)
Mutual labels: angularjs
Electron Release Server
A fully featured, self-hosted release server for electron applications, compatible with auto-updater.
Stars: ✭ 1,600 (+1279.31%)
Mutual labels: angularjs
angular2react
One line of code to turn any Angular 1 Component into a React Component (opposite of react2angular)
Installation
# Using Yarn:
yarn add angular2react angular angular-resource react react-dom @types/angular @types/react @types/react-dom
# Or, using NPM:
npm install angular2react angular angular-resource react react-dom @types/angular @types/react @types/react-dom --save
Usage
$injector
1. Save a reference to the let $injector
angular
.module('myModule')
.run(['$injector', function(_$injector) { $injector = _$injector }])
2. Create an Angular component
const MyComponent = {
bindings: {
fooBar: '<',
baz: '<'
},
template: `
<p>FooBar: {this.$ctrl.fooBar}</p>
<p>Baz: {this.$ctrl.baz}</p>
`
}
3. Expose it to Angular
angular
.module('myModule', [])
.component('myComponent', MyComponent)
4. Convert it to a React Component
import { angular2react } from 'angular2react'
const MyComponent = angular2react('myComponent', MyComponent, $injector)
5. Use it in your React code
<MyComponent fooBar={3} baz='baz' />
Why step 1?
We need a reference to the $injector
created by the Angular module that registered the Angular component you're exposing. That way we can manually compile your component.
If you use ngimport, you can skip step 1 and omit the last argument in step 4:
import { angular2react } from 'angular2react'
const MyComponent = angular2react('myComponent', MyComponent)
Full Examples
https://github.com/bcherny/angular2react-demos
Caveats
- Only one way bindings (
<
) are supported, because this is the only type of binding that React supports - Be sure to bootstrap your Angular app before rendering its React counterpart
Tests
npm test
License
Apache-2.0
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].