在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:ngReact开源软件地址:https://gitee.com/mirrors/ngreact开源软件介绍:
ngReactThe React.js library can be used as a view component in web applications. ngReact is an Angular module that allows React Components to be used in AngularJS applications. Motivation for this could be any of the following:
InstallationInstall via Bower: bower install ngReact or via npm: npm install ngreact UsageThen, just make sure Angular, React, and ngReact are on the page, <script src="bower_components/angular/angular.js"></script><script src="bower_components/react/react.js"></script><script src="bower_components/react/react-dom.js"></script><script src="bower_components/ngReact/ngReact.min.js"></script> and include the 'react' Angular module as a dependency for your new app <script> angular.module('app', ['react']);</script> and you're good to go. FeaturesSpecifically, ngReact is composed of:
ngReact can be used in existing angular applications, to replace entire or partial views with react components. The react-component directiveThe With an Angular app and controller declaration like this: angular .module('app', ['react']) .controller('helloController', function($scope) { $scope.person = { fname: 'Clark', lname: 'Kent' }; }); And a React Component like this var HelloComponent = React.createClass({ propTypes: { fname: React.PropTypes.string.isRequired, lname: React.PropTypes.string.isRequired }, render: function() { return ( <span> Hello {this.props.fname} {this.props.lname} </span> ); }});app.value('HelloComponent', HelloComponent); The component can be used in an Angular view using the react-component directive like so: <body ng-app="app"> <div ng-controller="helloController"> <react-component name="HelloComponent" props="person" watch-depth="reference"/> </div></body> Here:
The reactDirective serviceThe reactDirective factory, in contrast to the reactComponent directive, is meant to create specific directives corresponding to React components. In the background, this actually creates and sets up directives specifically bound to the specified React component. If, for example, you wanted to use the same React component in multiple places, you'd have to specify The service takes the React component as the argument. app.directive('helloComponent', function(reactDirective) { return reactDirective(HelloComponent);}); Alternatively you can provide the name of the component app.directive('helloComponent', function(reactDirective) { return reactDirective('HelloComponent');}); This creates a directive that can be used like this: <body ng-app="app"> <div ng-controller="helloController"> <hello-component fname="person.fname" lname="person.lname" watch-depth="reference"></hello-component> </div></body> The app.directive('hello', function(reactDirective) { return reactDirective(HelloComponent, ['fname', 'lname']);}); You may also customize the watch depth per prop/attribute by wrapping the name and an options object in an array inside the props array: app.directive('hello', function(reactDirective) { return reactDirective(HelloComponent, [ 'person', // takes on the watch-depth of the entire directive ['place', { watchDepth: 'reference' }], ['things', { watchDepth: 'collection' }], ['ideas', { watchDepth: 'value' }] ]);}); By default, ngReact will wrap any functions you pass as in app.directive('hello', function(reactDirective) { return reactDirective(HelloComponent, [ 'person', ['place', { watchDepth: 'reference' }], ['func', { watchDepth: 'reference', wrapApply: false }] ]);}); If you want to change the configuration of the directive created the app.directive('hello', function(reactDirective) { return reactDirective(HelloComponent, undefined, { restrict: 'C' });}); MinificationA lot of automatic annotation libraries including ng-annotate skip implicit annotations of directives. Because of that you might get the following error when using directive in minified code: Unknown provider: eProvider <- e <- helloDirective To fix it add explicit annotation of dependency var helloDirective = function(reactDirective) { return reactDirective('HelloComponent');};helloDirective.$inject = ['reactDirective'];app.directive('hello', helloDirective); Reusing Angular InjectablesIn an existing Angular application, you'll often have existing services or filters that you wish to access from your React component. These can be retrieved using Angular's dependency injection. The React component will still be render-able as aforementioned, using the react-component directive. It's also possible to pass Angular injectables and other variables as fourth parameter straight to the reactDirective, which will then attach them to the props app.directive('helloComponent', function(reactDirective, $ngRedux) { return reactDirective(HelloComponent, undefined, {}, { store: $ngRedux });}); Be aware that you can not inject Angular directives into JSX. app.filter('hero', function() { return function(person) { if (person.fname === 'Clark' && person.lname === 'Kent') { return 'Superman'; } return person.fname + ' ' + person.lname; };});/** @jsx React.DOM */app.factory('HelloComponent', function($filter) { return React.createClass({ propTypes: { person: React.PropTypes.object.isRequired }, render: function() { return <span>Hello $filter('hero')(this.props.person)</span>; } });}); <body ng-app="app"> <div ng-controller="helloController"> <react-component name="HelloComponent" props="person" /> </div></body> Jsx Transformation in the browserDuring testing you may want to run the NOTE: The workaround for this is hacky as the angular bootstap is postponed in with a Usage with webpack and AngularJS < 1.3.14CommonJS support was added to AngularJS in version 1.3.14. If you use webpack and need to support AngularJS < 1.3.14, you should use webpack's exports-loader so that ...module: { loaders: [ { test: path.resolve(__dirname, 'node_modules/angular/angular.js'), loader: 'exports?window.angular' } ]},... DevelopingBefore starting development run npm installbower install Build minified version and run tests with grunt Continually run test during development with grunt karma:background watch Running the examplesThe examples in the npm install --global bower Then install the bower components bower install The examples need to be run on a local webserver like https://www.npmjs.com/package/http-server. Run the examples by starting a webserver in the project root folder. CommunityMaintainers
Contributors
|
请发表评论