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.
Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.
ReplyDeletevery informative blog and useful article thank you for sharing with us , keep posting learn more Technology
ReplyDeleteReact js Certfication Course
Angularjs Online Training
Great Post, I have really gather more information here.
ReplyDeleteReact JS Online Training
React JS Online Course
React JS Online Training in chennai