angular-react

Use React Components in angular applications

This repo has been merged into https://github.com/davidchang/ngReact, please go there instead

#angular-react

The React.js library can be used as a view component in web applications. Based on NgReact angular-react is a angular directive (called react-component) and an service (called reactDirective) that allows React Components to be used in AngularJS applications.

angular-react can be used in existing angular applications, to replace areas of views with react components.

reactComponent directive

The reactComponent directive allows you to add React Components to your angular views.

With an angular app and controller declaration like this:

var app = angular.module( 'app', ['angular-react'] );

app.controller( 'helloController', function( $scope ) {
  $scope.person = { fname: 'Clark', lname: 'Kent' };
} );

And a React Component like this

/** @jsx React.DOM */
app.value( "Hello", React.createClass( {
  propTypes: {
    fname: React.PropTypes.string.isRequired,
    lname: React.PropTypes.string.isRequired
  },
  render: function() {
    return <span>Hello {this.props.fname} {this.props.lname}</span>;
  }
} ) );

The component can be used in an angular view using react-component like this.

<body ng-app="app">
  <h1 ng-controller="helloController">
    <react-component name="Hello" props="person"/>
  </h1>
</body>

reactDirective service

With the reactDirective service you can create named directives backed by React components. The service takes the name of the React component as argument.

app.directive( 'hello', function( reactDirective ) {
  return reactDirective( 'Hello' );
} );

This creates a directive that can be used like this.

<body ng-app="app">
  <h1 ng-controller="helloController">
    <hello fname="person.fname" lname="person.lname"/>
  </h1>
</body>

Reusing angular services

In an existing angular application you’ll often have existing services or filters that you wish to use from your React component. You can use angular’s dependency injector to get hold of those.

app.filter( 'hero', function() {
  return function( person ) {
    if ( person.fname === 'Clark' && person.lname === 'Kent' ) {
      return 'Superman';
    }
    return person.fname + ' ' + person.lname;
  };
} );

/** @jsx React.DOM */
app.factory( "Hello", function( $filter ) {
  return React.createClass( {
    propTypes: {
      person: React.PropTypes.object.isRequired,
    },
    render: function() {
      return <span>Hello $filter( 'hero' )( this.props.person )</span>;
    }
  } );
} );

Related Repositories

OnsenUI

OnsenUI

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js. ...

ngReact

ngReact

Use React Components in Angular ...

core-decorators.js

core-decorators.js

Library of stage-0 JavaScript decorators (aka ES2016/ES7 decorators but not accurate) inspired by languages that come with built-ins like @​override, @​deprecate, @​autobind, @​mixin and more. Popular with React/Angular, but is framework agnostic. ...

text-mask

text-mask

Input mask for React, Angular, Ember, Vue, & plain JavaScript ...

mobiscroll

mobiscroll

Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular, React, Knockout) ...


Top Contributors

kasperp