Angular. js, React. js integration, angular. jsreact. js

Angular. js, React. js integration, angular. jsreact. js
Required knowledge

Requirejs, Angularjs, and Reactjs can view the relevant content written in this blog for necessary knowledge.

Integrate Angular. js and React. js

In angular. angular has been mentioned in the love and hate of js. js performance problems, while React. js renders Pages Based on virtual dom, which has good performance, so it integrates React in the system. js.

Requirejs Configuration

Requirejs. config ({baseUrl: '/', paths: {'jquery ': 'lib'/jquery-2.1.3/jquery. min', 'angular ': 'libs/angular-1.3.15/angular. min', 'react ': 'libs/React-0.13.3/react. min', // use JSX to write a React, which depends on the following three files // React JSX 'jsxtransformer ': 'libs/react-0.13.3/JSXTransformer ', // require jsx 'jsx ': 'libs/react-0.13.3/jsx', // require text 'text': 'libs/react-0.13.3/text'}, shim: {'angular ': {deps: ['jquery'], exports: 'angular '}, 'react': {exports: 'react '}}, waitSeconds: 0 });

Timer component Timer

Use Reactjs to compile the Timer component Timer.
Note: Do not name JSX the directory where the jsx file is located. Otherwise, the parsing will fail..
Timer. js

// The dependency name must be React (first letter). Otherwise, the Reactdefine (['react '], function (React) {var TimeMessage = React cannot be found after JSX resolution. createClass ({render: function () {var elapsed = Math. round (this. props. elapsed/100); var seconds = elapsed/10 + (elapsed % 10? '':'. 0 '); // here, JSX will be parsed as return React. createElement ("p", null, "React has been successfully running for", seconds, "seconds. "); // The dependency name must be React; otherwise, React-> undefined return <p> React has been successfully running for {seconds} seconds. </p >;}}); var Timer = React. createClass ({getInitialState: function () {return {now: new Date () };}, componentDidMount: function () {var that = this; setInterval (function () {that. setState ({now: new Date ()}) ;}, 50) ;}, render: function () {var elapsed = this. state. now. getTime ()-this. props. start. getTime (); return <TimeMessage elapsed = {elapsed}/>;}); return Timer ;});

Angular. js uses React Components

Define (['angularapp', 'react ', 'jsx! Jsxdir/Timer // use jsx! XXXX format Introduction], function (angularApp, React, Timer) {// use the React component in angular controller. Similarly, angularApp is used in Directive link. controller ('welcomectrl', ['$ scope', function ($ scope) {var start = new Date (); Timer = React. createFactory (Timer); React. render (Timer ({start: start}), // The div element document in the page. getElementById ('testjsx') ;}]) ;});

Page Effect