Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
ng-reactify
Advanced tools
Readme
npm module to integrate angularjs and reactjs.
I have been working with angularjs for more than 2 years. I am backend guy amazed with frontend world and I would like to make frontend development easier than it is. First of all, we need to think out of the box. Thinking about reactjs, especially, functional programming, it is a bit different from convetional OO programming so, (git it five minute)[https://signalvnoise.com/posts/3124-give-it-five-minutes]. Seriously, it is just a new approach for new problems that we have been facing with the web evolution.
var ngReactify = require('ng-reactify');
import ngReactify from 'ng-reactify';
var ngReactify = window.ngReactify;
Here is an angular app using es6. Notice the following comment after the code.
import angular from 'angular';
import 'angular-route';
import ngReactify from 'ng-reactify';
import HelloWorld from '../src/boilerplate/hello-world';
import Comment from '../src/boilerplate/comment';
import PagesRoutes from '../src/boilerplate/pages-routes';
// this counter component is already connected
import Counter from '../src/boilerplate/counter';
import store from '../src/boilerplate/store';
import { hashHistory } from 'react-router';
ngReactify.registerComponents({
HelloWorld,
Comment,
PagesRoutes,
Counter
});
const reactPageConfig = {
path: '/pages',
componentName: 'PagesRoutes',
history: hashHistory
};
const ngRouteConfig = {
// angular configuration for route
};
const reactCounterPageConfig = {
path: '/counter',
componentName: 'Counter',
store
};
const appName = 'app-angular';
const appModule = angular.module(appName, [ngReactify.name, 'ngRoute']);
appModule.config(['$routeProvider', ($routeProvider) => {
ngReactify.wrapRouteProvider($routeProvider)
.when('/', {
template: `
<div>
I AM ON THE HOME PAGE
<br />
<a href='#/hello-world/'>
Hello World
</a>
<br />
<a href='#/comment/'>
Comment
</a>
<br />
<a href='#/pages'>
Pages
</a>
<br />
<a href='#/counter'>
Counter
</a>
<br />
<a href='#/counter-no-wrappers'>
Counter (No Wrappers)
</a>
<br />
<a href='#/there-is-no-such-url/'>
There is no such URL
</a>
</div>
`
})
.when('/hello-world', {
template: `
<div>
<div ng-reactify-component="HelloWorld"></div>
</div>
`
})
.when('/comment', {
template: `
<div>
<div
ng-reactify-component="Comment"
props="{ author: 'Danilo Castro', text: 'Complete text!' }"
></div>
</div>
`
})
.react.when(reactPageConfig, ngRouteConfig)
.react.when(reactCounterPageConfig, ngRouteConfig)
.when('/counter-no-wrappers', {
controller: [function () {
const vm = this;
vm.store = store;
}],
controllerAs: 'vm',
template: `
<div>
<div
ng-reactify-component="Counter"
store="vm.store"
></div>
</div>
`
})
.otherwise({
template: '<h1>SORRY! ERROR!</h1>'
});
}]);
angular.element(document).ready(() => {
angular.bootstrap(document, [appName]);
});
For react components with links (it is very important, we just cover react-router), they must have a dynamic baseUrl like the following code. Doing so, the ng-reactify module is able to manage the route changes.
Look the method render inside the component below.
import React, {
Component
} from 'react';
class MyComponent extends Component
render() {
/**
* Whenever you are creating a link, it is likely to use a
* route management to provide access to other components.
* Thus, it is important capture the parent context path in
* order to define relative paths.
*
* Even if you are not using a route manager, this code
* handles well the capture of parent context path.
*
* Expected result for non-managed-routes: ''
* Expected result for managed-routes: <the-correct-parent-url>
*/
const index = (this.props.routes || []).indexOf(this.props.route || {});
const basePath = this.props.routes
.slice(0, index)
.filter(route => !!route.path)
.map(route => route.path)
.join('/');
return (
<div>
<nav>
<IndexLink to={[basePath, '/'].join('')}>Home</IndexLink>
<br />
<Link to={[basePath, '/contact'].join('')}>Contact</Link>
<br />
<Link to={[basePath, '/../'].join('')}>Angular Home</Link>
</nav>
{this.props.children}
</div>
);
}
Please, check out our DEV folder, you will find out a proper example. Once you install the ng-reactify module, go to node_modules/ng-reactify/DEV and have a look on app-angular file.
Thanks for all support and help us making pull request to optimise this module!
FAQs
npm module for angularjs and reactjs integration
We found that ng-reactify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).