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.
ReplyDeleteGreat Article android based projects
DeleteJava Training in Chennai
Project Center in Chennai
Java Training in Chennai
projects for cse
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
very 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
Nice post..
ReplyDeleteSAP mm training
SAP pm training
SAP PP training
SAP Qm training
SAP Sd training
SAP Security training
SAP wm training
Scala training
We provide Live Instructor-Led Mulesoft online training with 100% job Assistance and 24 X 7 Online Support. For more information about mulesoft course.
ReplyDeletemulesoft self learning | best mulesoft training
Really nice post. provided a helpful information.I hope that you will post more updates like this
ReplyDeletemsbi online course | msbi online training