Skip to content

Commit be3646f

Browse files
Roy SivanRoy Sivan
Roy Sivan
authored and
Roy Sivan
committed
single post view routing using ui-router
1 parent 82ac6a9 commit be3646f

File tree

9 files changed

+52918
-314
lines changed

9 files changed

+52918
-314
lines changed

‎assets/js/angular_app.js

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,45 @@
11
"use strict";
22
var reang;
33
var $ = jQuery;
4-
reang = angular.module('reang', ['ngResource'])
4+
reang = angular.module('reang', ['ngResource', 'ui.router'])
55
.filter('to_trusted', ['$sce', function($sce) {
66
return function(text) {
77
return $sce.trustAsHtml(text);
88
};
99
}])
10+
.config(function($stateProvider, $urlRouterProvider) {
11+
$urlRouterProvider.otherwise('/');
12+
$stateProvider
13+
.state('list', {
14+
url: '/',
15+
template: '<reactposts data="posts" id="test"></reactposts>',
16+
controller: 'reang_controller'
17+
})
18+
.state('single', {
19+
url: '/post/:id',
20+
template: function( $scope ){
21+
return '<reactposts data="posts" id="test"></reactposts>'
22+
},
23+
controller: function( $scope, $stateParams, Posts ) {
24+
$scope.post_id = $stateParams.id;
25+
$scope.getPosts = function(){
26+
Posts.get({ID: $stateParams.id}, function(res){
27+
$scope.posts = res;
28+
});
29+
}
30+
$scope.getPosts();
31+
}
32+
});
33+
//$locationProvider.html5Mode(true);
34+
})
35+
.run(function($rootScope, $location){
36+
$rootScope.$on("$routeChangeStart", function (event, next, current) {
37+
console.log( next, current );
38+
});
39+
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log('Success to:', to.url ); });
40+
$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, error) { console.log('Error:', to.url, error ); });
41+
$rootScope.$on("$stateNotFound", function(evt, unfoundState, fromState, fromParams) { console.log('Not Found:', unfoundState ); });
42+
})
1043
.factory('Posts', function($resource) {
1144
return $resource(ajaxInfo.json_url + 'posts/:ID?_wp_json_nonce='+ajaxInfo.nonce, {
1245
ID: '@ID'
@@ -20,10 +53,7 @@ reang = angular.module('reang', ['ngResource'])
2053
$scope.posts = res;
2154
});
2255
}
23-
2456
$scope.getPosts();
25-
26-
2757
$('body').on('click', '.edit_post', function(e) {
2858
var post_id = $(this).data('id');
2959
console.log(post_id);
@@ -56,6 +86,12 @@ reang = angular.module('reang', ['ngResource'])
5686
elm[0]
5787
)
5888
}
89+
if( n && n.ID ) {
90+
$rootScope.react_app = React.render(
91+
React.createElement(APP, {data:$scope.data}),
92+
elm[0]
93+
)
94+
}
5995
});
6096
}
6197
}

‎build/js/angular-route.min.js.map

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/js/react_angular.min.js

Lines changed: 52772 additions & 269 deletions
Large diffs are not rendered by default.

‎build/js/react_app_js.js

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
11
var $ = jQuery;
2-
32
var Post = React.createClass({
4-
displayName: "Post",
5-
editPost: function () {
6-
$('#editPost').modal('show');
7-
},
8-
render: function () {
9-
return React.createElement(
10-
"article",
11-
null,
12-
React.createElement(
13-
"h3",
14-
null,
15-
this.props.title
16-
),
17-
React.createElement("div", { dangerouslySetInnerHTML: { __html: this.props.content } }),
18-
React.createElement(
19-
"button",
20-
{ onClick: this.editPost, "data-id": this.props.ID, className: "edit_post" },
21-
"edit post"
22-
)
23-
);
24-
}
25-
});
3+
displayName: "Post",
4+
render: function() {
5+
if (!this.props.single) {
6+
return React.createElement("article", null, React.createElement("h3", null, this.props.title), React.createElement("div", {
7+
dangerouslySetInnerHTML: {
8+
__html: this.props.content
9+
}
10+
}), React.createElement("a", {
11+
href: '/#/post/' + this.props.ID,
12+
className: 'btn btn-success'
13+
}, 'View Post'), React.createElement("button", {
14+
onClick: this.editPost,
15+
"data-id": this.props.ID,
16+
className: "edit_post btn btn-primary"
17+
}, "edit post"));
18+
} else {
19+
return React.createElement("article", null, React.createElement("h3", null, this.props.title), React.createElement("div", {
20+
dangerouslySetInnerHTML: {
21+
__html: this.props.content
22+
}
23+
}), React.createElement("button", {
24+
onClick: this.editPost,
25+
"data-id": this.props.ID,
26+
className: "edit_post btn btn-primary"
27+
}, "edit post"));
2628

29+
}
30+
}
31+
});
2732
var APP = React.createClass({
28-
displayName: "APP",
29-
render: function () {
30-
if (this.props && this.props.data.length) {
31-
var posts = this.props.data.map(function (post) {
32-
return React.createElement(Post, post);
33-
});
34-
35-
return React.DOM.div(null, posts);
36-
}
37-
}
33+
displayName: "APP",
34+
render: function() {
35+
if (this.props && this.props.data.length) {
36+
var posts = this.props.data.map(function(post) {
37+
post.single = false;
38+
return React.createElement(Post, post);
39+
});
40+
return React.DOM.div(null, posts);
41+
} else if (this.props && this.props.data.ID) {
42+
this.props.data.single = true;
43+
return React.createElement(Post, this.props.data);
44+
}
45+
}
3846
});

‎build/js/scripts.js

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,45 @@
11
"use strict";
22
var reang;
33
var $ = jQuery;
4-
reang = angular.module('reang', ['ngResource'])
4+
reang = angular.module('reang', ['ngResource', 'ui.router'])
55
.filter('to_trusted', ['$sce', function($sce) {
66
return function(text) {
77
return $sce.trustAsHtml(text);
88
};
99
}])
10+
.config(function($stateProvider, $urlRouterProvider) {
11+
$urlRouterProvider.otherwise('/');
12+
$stateProvider
13+
.state('list', {
14+
url: '/',
15+
template: '<reactposts data="posts" id="test"></reactposts>',
16+
controller: 'reang_controller'
17+
})
18+
.state('single', {
19+
url: '/post/:id',
20+
template: function( $scope ){
21+
return '<reactposts data="posts" id="test"></reactposts>'
22+
},
23+
controller: function( $scope, $stateParams, Posts ) {
24+
$scope.post_id = $stateParams.id;
25+
$scope.getPosts = function(){
26+
Posts.get({ID: $stateParams.id}, function(res){
27+
$scope.posts = res;
28+
});
29+
}
30+
$scope.getPosts();
31+
}
32+
});
33+
//$locationProvider.html5Mode(true);
34+
})
35+
.run(function($rootScope, $location){
36+
$rootScope.$on("$routeChangeStart", function (event, next, current) {
37+
console.log( next, current );
38+
});
39+
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log('Success to:', to.url ); });
40+
$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, error) { console.log('Error:', to.url, error ); });
41+
$rootScope.$on("$stateNotFound", function(evt, unfoundState, fromState, fromParams) { console.log('Not Found:', unfoundState ); });
42+
})
1043
.factory('Posts', function($resource) {
1144
return $resource(ajaxInfo.json_url + 'posts/:ID?_wp_json_nonce='+ajaxInfo.nonce, {
1245
ID: '@ID'
@@ -20,10 +53,7 @@ reang = angular.module('reang', ['ngResource'])
2053
$scope.posts = res;
2154
});
2255
}
23-
2456
$scope.getPosts();
25-
26-
2757
$('body').on('click', '.edit_post', function(e) {
2858
var post_id = $(this).data('id');
2959
console.log(post_id);
@@ -56,6 +86,12 @@ reang = angular.module('reang', ['ngResource'])
5686
elm[0]
5787
)
5888
}
89+
if( n && n.ID ) {
90+
$rootScope.react_app = React.render(
91+
React.createElement(APP, {data:$scope.data}),
92+
elm[0]
93+
)
94+
}
5995
});
6096
}
6197
}

‎functions.php

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ class react_ang_theme {
44

55
function __construct() {
66
add_action( 'wp_enqueue_scripts', array( $this, '__react_ang_scripts' ) );
7+
add_action( 'print_scripts', array( $this, '_react_ang_print_scripts' ) );
78
}
89

910
function __react_ang_scripts() {
1011

11-
1212
wp_enqueue_script( 'react_ang_main', get_template_directory_uri().'/build/js/react_angular.min.js', array( 'jquery' ), null, true );
1313

1414
wp_localize_script( 'react_ang_main', 'ajaxInfo',
@@ -26,6 +26,10 @@ function __react_ang_scripts() {
2626
wp_enqueue_style( 'styles', get_template_directory_uri().'/build/css/styles.css', array(), null, 'all' );
2727

2828
}
29+
30+
function _react_ang_print_scripts() {
31+
wp_enqueue_script( 'tiny_mce' );
32+
}
2933
}
3034

3135

‎gulpfile.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ gulp.task('sass', function(){
1414
});
1515

1616
gulp.task('js', function(){
17-
gulp.src(['node_modules/react/dist/react-with-addons.js', 'bower_components/angular/angular.js', 'bower_components/angular-resource/angular-resource.js'])
17+
gulp.src([
18+
'node_modules/react/dist/react-with-addons.js',
19+
'bower_components/angular/angular.js',
20+
'bower_components/angular-resource/angular-resource.js',
21+
'bower_components/angular-ui-router/release/angular-ui-router.js'
22+
])
1823
.pipe(concat('js/react_angular.min.js'))
1924
.pipe(gulp.dest('build'));
2025

‎index.php

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22

33
<div class="container">
44
<div class="row">
5-
<div class="col-sm-12" ng-controller="reang_controller">
6-
<reactposts data="posts" id="test"></reactposts>
5+
<div class="col-sm-12">
6+
<h1><a ui-sref="list">Blog</a></h1>
7+
<!-- UI VIEW -->
8+
<div ui-view></div>
9+
710
<!-- EDIT MODAL -->
811
<div class="modal fade" id="editPost" tabindex="-1" role="dialog" aria-labelledby="editPost" aria-hidden="true" >
912
<div class="modal-dialog">

‎single.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h2>TESTING</h2>

0 commit comments

Comments
 (0)