Skip to content

Commit a3e123e

Browse files
patrickmarabeaspatrickmarabeas
committed
Update to be more inline with article
1 parent eac5b18 commit a3e123e

File tree

10 files changed

+205
-79
lines changed

10 files changed

+205
-79
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# ng-Component.js
1+
# nrg.js
22

33
### Module for interfacing React components with Angular applications
44

55
### Install and Inclusion
6-
Grab it with Bower:
6+
Grab it with Bower: `bower install nrg`
77

88
Include it in your AngularJS application:
99

10-
var myApp = angular.module( 'myApp', [ 'ngComponent' ] );
10+
var myApp = angular.module( 'myApp', [ 'nrg' ] );
1111

1212
### Install local dev environment
1313
npm install -g gulp

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "ngComponent",
2+
"name": "nrg.js",
33
"version": "1.0.0",
44
"main": [
5-
"src/ng-Component.js"
5+
"src/nrg.js"
66
],
77
"keywords": [
88
"react",

‎demo/js/app.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
;(function(window, document, angular, undefined) {
2+
'use strict';
3+
angular.module('app', ['nrg'])
4+
5+
.controller('InjectedController', [ '$scope', function($scope) {
6+
$scope.ThisFunctionIsOnTheScope = function() {
7+
8+
}
9+
}])
10+
11+
})(window, document, angular);

‎demo/js/example1.js

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,43 @@
44
'use strict';
55

66
/* ANGULAR.JS */
7-
angular.module('demo', ['ngComponent'])
8-
.controller('EX1Controller', [ '$rootScope', '$scope', function($rootScope, $scope) {
9-
$scope.demo = {};
10-
$scope.demo.message = 'This is set in Angular';
11-
12-
$scope.handleChange = function() {
13-
$rootScope.$broadcast('render-content');
14-
};
7+
angular.module('app')
8+
9+
.controller('MainController', [ '$rootScope', '$scope', function($rootScope, $scope) {
10+
11+
$scope.text = 'This is set in Angular';
12+
13+
$scope.destroy = function() {
14+
$scope.$destroy();
15+
alert('Scope has been destroyed (which we listen for and unmount the react component). This was called from within the React component');
16+
}
1517
}]);
1618

1719
/* REACT.JS */
18-
window.fittext = React.createClass({displayName: 'fittext',
19-
handleChange: function(event) {
20-
/* React */
21-
this.forceUpdate();
20+
window.ex1 = React.createClass({displayName: 'ex1',
2221

23-
/* Angular */
22+
render: function(){
23+
console.log(this.props.scope);
24+
return (
25+
React.DOM.div(null,
26+
React.DOM.input({type: "text", value: this.props.scope.ngModel, onChange: this.handleChange}),
27+
React.DOM.button({onClick: this.deleteScope}, "Destroy Scope"),
28+
React.DOM.p(null, this.props.scope.ngModel)
29+
)
30+
)
31+
},
32+
33+
handleChange: function(event) {
2434
var _this = this;
2535
this.props.scope.$apply(function() {
2636
_this.props.scope.ngModel = event.target.value;
2737
});
2838
},
2939

30-
render: function(){
31-
return (
32-
React.DOM.div(null,
33-
React.DOM.p(null, React.DOM.strong(null, "this.props.scope.ngModel: "), this.props.scope.ngModel),
34-
React.DOM.input({type: "text", value: this.props.scope.ngModel, onChange: this.handleChange})
35-
)
36-
)
40+
deleteScope: function(event) {
41+
this.props.scope.$parent.destroy();
3742
}
43+
3844
});
3945

4046
})(window, document, angular, React);

‎demo/js/example2.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/** @jsx React.DOM */
2+
3+
;(function(window, document, angular, React, undefined) {
4+
'use strict';
5+
6+
/* ANGULAR.JS */
7+
angular.module('app')
8+
.controller('NumberController', ['$scope', function($scope) {
9+
10+
$scope.numbers = [];
11+
($scope.numGen = function(){
12+
for(var i = 0; i < 5000; i++) {
13+
$scope.numbers[i] = Math.floor(Math.random() * (999999999999999 - 1)) + 1;
14+
}
15+
})();
16+
17+
}]);
18+
19+
/* REACT.JS */
20+
window.ex2 = React.createClass({displayName: 'ex2',
21+
22+
render: function() {
23+
var rows = this.props.scope.ngModel.map(function(number) {
24+
return (
25+
React.DOM.tr(null,
26+
React.DOM.td(null, number)
27+
)
28+
);
29+
});
30+
31+
return (
32+
React.DOM.table(null, rows)
33+
);
34+
}
35+
});
36+
37+
})(window, document, angular, React);

‎demo/jsx/example1.jsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,43 @@
44
'use strict';
55

66
/* ANGULAR.JS */
7-
angular.module('demo', ['ngComponent'])
8-
.controller('EX1Controller', [ '$rootScope', '$scope', function($rootScope, $scope) {
9-
$scope.demo = {};
10-
$scope.demo.message = 'This is set in Angular';
11-
12-
$scope.handleChange = function() {
13-
$rootScope.$broadcast('render-content');
14-
};
7+
angular.module('app')
8+
9+
.controller('MainController', [ '$rootScope', '$scope', function($rootScope, $scope) {
10+
11+
$scope.text = 'This is set in Angular';
12+
13+
$scope.destroy = function() {
14+
$scope.$destroy();
15+
alert('Scope has been destroyed (which we listen for and unmount the react component). This was called from within the React component');
16+
}
1517
}]);
1618

1719
/* REACT.JS */
18-
window.fittext = React.createClass({
19-
handleChange: function(event) {
20-
/* React */
21-
this.forceUpdate();
20+
window.ex1 = React.createClass({
21+
22+
render: function(){
23+
console.log(this.props.scope);
24+
return (
25+
<div>
26+
<input type='text' value={this.props.scope.ngModel} onChange={this.handleChange} />
27+
<button onClick={this.deleteScope}>Destroy Scope</button>
28+
<p>{this.props.scope.ngModel}</p>
29+
</div>
30+
)
31+
},
2232

23-
/* Angular */
33+
handleChange: function(event) {
2434
var _this = this;
2535
this.props.scope.$apply(function() {
2636
_this.props.scope.ngModel = event.target.value;
2737
});
2838
},
2939

30-
render: function(){
31-
return (
32-
<div>
33-
<p><strong>this.props.scope.ngModel: </strong>{this.props.scope.ngModel}</p>
34-
<input type='text' value={this.props.scope.ngModel} onChange={this.handleChange} />
35-
</div>
36-
)
40+
deleteScope: function(event) {
41+
this.props.scope.$parent.destroy();
3742
}
43+
3844
});
3945

4046
})(window, document, angular, React);

‎demo/jsx/example2.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/** @jsx React.DOM */
2+
3+
;(function(window, document, angular, React, undefined) {
4+
'use strict';
5+
6+
/* ANGULAR.JS */
7+
angular.module('app')
8+
.controller('NumberController', ['$scope', function($scope) {
9+
10+
$scope.numbers = [];
11+
($scope.numGen = function(){
12+
for(var i = 0; i < 5000; i++) {
13+
$scope.numbers[i] = Math.floor(Math.random() * (999999999999999 - 1)) + 1;
14+
}
15+
})();
16+
17+
}]);
18+
19+
/* REACT.JS */
20+
window.ex2 = React.createClass({
21+
22+
render: function() {
23+
var rows = this.props.scope.ngModel.map(function(number) {
24+
return (
25+
<tr>
26+
<td>{number}</td>
27+
</tr>
28+
);
29+
});
30+
31+
return (
32+
<table>{rows}</table>
33+
);
34+
}
35+
});
36+
37+
})(window, document, angular, React);

‎index.html

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html data-ng-app="demo">
2+
<html data-ng-app="app">
33
<head>
44

55
<title></title>
@@ -9,27 +9,51 @@
99
</head>
1010
<body>
1111

12-
<div ng-controller="EX1Controller">
12+
<div data-ng-controller="MainController">
13+
<h1>Example 1</h1>
1314

14-
<header>
15-
<h1></h1>
16-
<h2></h2>
17-
</header>
15+
<h2>REACT</h2>
16+
<div data-component="ex1" data-ng-model="text" data-ctrl="InjectedController"></div>
1817

19-
<h1>REACT</h1>
20-
<div id="content" data-component="fittext" data-setting="12" data-ng-model="demo.message" data-check="listen"></div>
18+
<h2>ANGULAR</h2>
19+
<input type="text" data-ng-model="text" data-ng-change="handleChange()" />
20+
<p>{{text}}</p>
2121

22-
<h1>ANGULAR</h1>
23-
<input type="text" ng-model="demo.message" ng-change="handleChange()" />
24-
<p><strong>scope.demo.message:</strong> {{demo.message}}</p>
2522

2623
</div>
2724

25+
<hr>
26+
27+
<div data-ng-controller="NumberController">
28+
<h1>Example 2</h1>
29+
<p>Uncomment one of the blocks of code</p>
30+
31+
<button ng-click="numGen()">Refresh Data</button>
32+
33+
<hr>
34+
35+
36+
<!-- REACT -->
37+
<!--<div data-component="ex2" data-ng-model="numbers"></div>-->
38+
39+
40+
<!-- ANGULAR -->
41+
<!--<table>-->
42+
<!--<tr ng-repeat="number in numbers">-->
43+
<!--<td>{{number}}</td>-->
44+
<!--</tr>-->
45+
<!--</table>-->
46+
47+
</div>
48+
49+
2850
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
2951
<script type="text/javascript" src="lib/react/react.js"></script>
3052

31-
<script type="text/javascript" src="src/ng-Component.js"></script>
53+
<script type="text/javascript" src="demo/js/app.js"></script>
54+
<script type="text/javascript" src="src/nrg.js"></script>
3255
<script type="text/javascript" src="demo/js/example1.js"></script>
56+
<script type="text/javascript" src="demo/js/example2.js"></script>
3357

3458
</body>
3559
</html>

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{
2-
"name": "ngComponent",
2+
"name": "nrg.js",
33
"version": "1.0.0",
44
"description": "Module for interfacing React components with Angular applications",
5-
"homepage": "https://github.com/patrickmarabeas/ng-Component.js",
6-
"bugs": "https://github.com/patrickmarabeas/ng-Component.js/issues",
5+
"homepage": "https://github.com/patrickmarabeas/nrg.js",
6+
"bugs": "https://github.com/patrickmarabeas/nrg.js/issues",
77
"repository": {
88
"type": "git",
9-
"url": "git://github.com/patrickmarabeas/ng-Component.js.git"
9+
"url": "git://github.com/patrickmarabeas/nrg.js.git"
1010
},
1111
"license": "MIT",
12-
"main": "src/ng-Component.js",
12+
"main": "src/nrg.js",
1313
"devDependencies": {
1414
"gulp": "~3.8.0",
1515
"gulp-watch": "~0.6.9",

0 commit comments

Comments
 (0)