Passing User Data from PHP/HTML to AngularJS

Question

I am new to AngularJS and am still learning but I didn't see this question asked anywhere on this site. I am building a traditional html/php list website that passes data such as a list id from an index page to a list page (listr.npctimes.com).

After some initial playing with angularJS I realized that it's strength is on a single page web app so I stopped trying to fit it with the entire site and want to create a web app for the user to modify the selected list on the list page. Unfortunately I haven't figured out how to get the list id from the GET data in the url (listr.npctimes.com/list.php?id=1 for example) to the angularJS controller so that the controller can request the list items from the specific list.

PHP/HTML (With AngularJS)

<?php $list_id = $_GET['id']; ?>

<div data-ng-app="listApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#">{{ list.name }}</a>
    </li>
  </ul>
</div>

Angular JS Controller

listApp.controller("listCtrl", function ($scope, $http) {
  $http.get("http://listr.npctimes.com/php/items.php?list_id=1").success(function (response) {
    $scope.lists = response;
  });
});

Currently the list_id is hardcoded in the controller http get request in angularJS but I would like to get the PHP list_id variable to the angularJS controller so that I can use it to request the items from the proper list to set up the web app in the first place.

The items.php file returns simple JSON which looks like

[{"id":"1","list_id":"1","name":"Renew Truck Registratiion","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""},{"id":"2","list_id":"1","name":"Rental Showing on Thursday","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""}]

and can be loaded at http://listr.npctimes.com/php/items.php?list_id=1

What I've Tried

I found a couple posts on using the location variable to try to pull the get variable out of the url but whenever I try to use location it crashes the entire controller.

I have also tried using php to set the value of a hidden element in the HTML and pull it out using jQuery in the angularJS controller but this has resulted in an "undefined" variable.

Any help is appreciated! Thanks!

Answer 1

You shouldn't use <?php ... ?> or link to PHP site or something like that in your Angular front-end, because once you decide to use Angular, its mean all your front-end is built with Angular, PHP is server side language. Just send request to server side, then receive data and display...

To passing passing/getting parameters, you can config in $routeProvider.

In your app.js:

angular.module('exampleApp', [
  'ngRoute'  
])
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        action: 'home'
      })
      .when('/list/:itemId', {
        templateUrl: 'views/item.html',
        action: 'lists'
});
});

Then, after you loaded the list into your home page, you can set href for each item:

<div data-ng-app="exampleApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#/list/{{list.id}}">{{ list.name }}</a>
    </li>
  </ul>
</div>

Now in your itemCtrl, you can handle the list id by $routeParams provider

angular.module('exampleApp.controllers', [])
    .controller('itemCtrl', function ($scope, $sce, $route, $routeParams, $http){   
      $scope.$on("$routeChangeSuccess", function( $currentRoute, $previousRoute ){
          if( $routeParams.itemId ){
             // use http to get the item which has id = $routeParams.itemId

          }
       });
});

Hope this help, any problems you can post as the comment