Jump to content
Manol

Processwire + AngularJS

Recommended Posts

This is the way I use to integrate both worlds together.

1.- _header.php ( or whatever is called the file that contains your <body> tag )


<head>
...
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script>var app = angular.module('myApp', [])</script>

</head>

<body ng-app="myApp">
...

2.- yourTemplate.php

<script>

    app.controller('myCtrl', function ($scope) {
	$scope.myvar = [];			
	$scope.myvar = <?=getChildren("template=yourtemplatename")?>;
        console.debug("my Object form php",$scope.myvar);
    });

</script>

<!-- now $scope.myvar is accesible -->
<div ng-controller="myCtrl">

</div>

3.- getChildren is a function that I include in _func.php

function getChildren($pageId) {

	$pagina = wire('pages')->get($pageId);
 
 
		
    // fields to be avoided
    $avoid = array("FieldtypeFieldsetOpen", "FieldtypeFieldsetClose","FieldtypeFieldsetTabOpen","FieldtypeFieldsetTabClose");
    // fields that must be returned
    $wanted = $fields;
 
    // selector
    $paginas = $pagina->find($selector);
 
	$arr = array(); 
    foreach ($paginas as $child) {
 
		$array = array(); 
 
		foreach($child->fields as $field) {
 
			$array['id'] = $child->id;
 
			// if we dont' want all fields back
			if (  !in_array($field->type, $avoid)   &&   in_array($field->name, $wanted) && (count($wanted)>0) ) {
				$array[$field->name] = htmlspecialchars($child->get($field->name));
			}
 
			// we want all fields back
			if (  !in_array($field->type, $avoid) && (count($wanted)==0) ) {
				$array[$field->name] = htmlspecialchars($child->get($field->name));
			}			
 
		}
		array_push($arr, $array);
    }
 
	echo json_encode($arr);

}
  • Like 11

Share this post


Link to post
Share on other sites

If you install this module you´ll be able to use angular and use it in your templates directly.

Example of a list of  all children of the actual page.

<script>
	app.controller('myCtrl', function ($scope) {
	  	$scope.children = [];		
	  	$scope.children = <?=$page->getChildren()?>;
	});
</script>

<div ng-controller="myCtrl">
  <ul>
    <li ng-repeat="child in children">{{child.title}}</li>
  </ul>
</div>
  • Like 10

Share this post


Link to post
Share on other sites

Module updated

1.- Added methods

  • $page->getChildren()
  • $page->getPage()

2.- Now you can inject scripts trough module configuration

post-1191-0-13663200-1417459736_thumb.pn

  • Like 7

Share this post


Link to post
Share on other sites

New methods:

$page->getPage()
$page->getPage(1015)
 
$page->getChildren()
$page->getChildren(2024)
$page->getChildren('template=products')
  • Like 4

Share this post


Link to post
Share on other sites

Hi Manol,

How can I access the page url using your module?

I am bulding an Intranet solution and I want to use Angular on in the table views of projects, clients etc. and then link to a detail page for a specifc project, client etc.

Also, JSON returns id as integer but every other field as string. How can I use/(convert?) a specific field as integer?

Thanks for the module.

Peter

PS. To get the module installed I had to add an is_array check in the getChildren function of your module.

EDIT: I used this module for the urls: ProcessRedirectIds

Share this post


Link to post
Share on other sites

I need project.project_progress to output as integer for the progress bar:

<script>

app.controller('projects', function ($scope) {
  $scope.projects = [];
  $scope.projects = <?=$page->getChildren('template=project')?>;
  $scope.sortType     = 'title';
  $scope.sortReverse  = false;
  $scope.searchProject   = '';
});

</script>

...

<tbody>
<tr ng-repeat="project in projects | orderBy:sortType:sortReverse | filter:searchProject">
<td><strong>{{project.title}}</strong></td>
<td>{{project.project_start_date}}</td>
<td>{{project.project_due_date}}</td>
<td>
<div class='progress-bar-indication'>
<span class='meter' style='width: {{project.project_progress}}%'>
<p>{{project.project_progress}}%</p>
</span>
</div>
</td>
<td><a href="{{project.id}}"><i class="fa fa-eye"></i></a></td>
</tr>
</tbody>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...