angular-react

Use React Components in angular applications

5 years after

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

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...


Top Contributors

kasperp