AngularJS is great front end MV* framework. The most popular
feature of AngularJS is its two-way data binding mechanism and this is the
strongest point behind its lack of performance.
Here I am talking
about scenario where we need to bind huge amount of data using ng-repeat. To
overcome this performance backlog ,we can use React.js which is product of
Facebook and they are using in production.
In this article, we will see one very simple example of React.JS
with AngularJS. Have a look on following
code.
<html ng-app="fasterAngular">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script data-require="angular.js@@" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="react@@*" data-semver="0.10.0" src="http://fb.me/react-0.10.0.js"></script>
<script>
var ReactComponent = React.createClass({
displayName: 'ReactComponent',
render: function () {
return React.DOM.div(null, this.props.framework);
}
});
angular.module('fasterAngular', []).
controller('mycontroller', ['$scope', function ($scope) {
}]).directive('fastReact', function () {
return {
restrict: 'E',
scope: {
framework: '='
},
link: function (scope, el, attrs)
{
// Render React virtual DOM
React.renderComponent(
ReactComponent({
framework: 'I am React DOM' }),
el[0]
);
}
}
})
</script>
</head>
<body>
<div ng-controller="mycontroller">
<fast-react></fast-react>
</div>
</body>
</html>
Here is output.
