Manol Posted November 27, 2014 Share Posted November 27, 2014 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); } 11 Link to comment Share on other sites More sharing options...
Manol Posted November 29, 2014 Author Share Posted November 29, 2014 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> 10 Link to comment Share on other sites More sharing options...
Manol Posted December 1, 2014 Author Share Posted December 1, 2014 Module updated 1.- Added methods $page->getChildren() $page->getPage() 2.- Now you can inject scripts trough module configuration 7 Link to comment Share on other sites More sharing options...
Manol Posted December 2, 2014 Author Share Posted December 2, 2014 New methods: $page->getPage() $page->getPage(1015) $page->getChildren() $page->getChildren(2024) $page->getChildren('template=products') 4 Link to comment Share on other sites More sharing options...
Peter Posted November 12, 2015 Share Posted November 12, 2015 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 Link to comment Share on other sites More sharing options...
Peter Posted November 12, 2015 Share Posted November 12, 2015 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> Link to comment Share on other sites More sharing options...
siilak Posted September 13, 2016 Share Posted September 13, 2016 Really nice example. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now