wesleycho/angular-react

ReactJS with Angular

angular-react

This project is for those wishing to integrate AngularJS using ReactJS, a performant view layer that can play well with a popular MV* framework for complex web applications.

This is currently a rough WIP.

Setup

• (Recommended) Install react-tools via npm install -g react-tools
• (Recommended) Run jsx --watch src/ dest/ (source and destination directories - stub paths as needed)

Usage

To use this library, one must inject the $react helper service into your directive. $react is a wrapper around the React api that implements a createClass method, which registers the React component class and creates a directive object. If the component is already registered, it will return you the component.

Example

/* hello directive - lives in separate file for JSX to compile */
module.directive('hello', function ($react) {
  return $react.createClass('hello', {
    render: function () {
      /** @jsx React.DOM */
      var person = this.props.person || 'World';
      return (
        <div>Hello {person}!</div>
      );
    }
  });
});

/* Scripts */
module.controller('DemoCtrl', function ($scope) {
  $scope.props = {
    person: 'Wesley'
  };
});

/* html */
<hello></hello> // renders <div>Hello World!</div>
<hello props="props"></hello> // renders <div>Hello Wesley!</div>

API

$react.createClass(componentName, reactClass, options) - function that takes a componentName, React component class, and options and returns a directive object back

• componentName: String
• reactClass: React class - standard input for React.createClass
• options: Object. Standard input for directive object definitions

$react.renderComponent(scope, element, attributes) - function that takes a $scope, element, and attributes. These are the same arguments passed in by a linking function in a directive.

angular-react's Issues

Injected service naming issue

I would strongly recommend not naming the service $react, and instead opt for ReactService or something similar. According to the AngularJS documentation:

The $ prefix is there to namespace Angular-provided services. To prevent collisions it's best to avoid naming your services and models anything that begins with a $.

Question : why postpone React rendering ?

Hi,

I'm testing React integration in an Angular in a very close way you do, but I don't found the use to postpone the rendering of the React component, you do using $$postDigest.

What is the reason behind that please ?

Thanks