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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.