PHP/HTML에서 AngularJS로 사용자 데이터 전달

Question

저는 AngularJS를 처음 사용하고 아직도 배우고 있지만이 사이트의 어디서나이 질문을 보지 못했습니다. 색인 페이지에서 목록 페이지 (listr.npctimes.com)의 목록 ID와 같은 데이터를 전달하는 전통적인 html/php 목록 웹 사이트를 구축하고 있습니다.

angularJS로 처음 플레이 한 후에 나는 힘이 단일 페이지 웹 앱에 있다는 것을 깨달았으므로 전체 사이트에 맞추기를 멈추었으며 사용자가 선택한 목록을 수정할 수있는 웹 앱을 만들고 싶습니다. 목록 페이지. 불행히도 컨트롤러에서 특정 목록의 목록 항목을 요청할 수 있도록 URL의 GET 데이터 (예 : listr.npctimes.com/list.php?id=1)를 angularJS 컨트롤러로 가져 오는 방법을 찾지 못했습니다. (AngularJS와 함께)

PHP/HTML

<?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> 

각도 JS 컨트롤러 현재 list_id로 컨트롤러 HTTP GET AngularJS와의 요청하지만 싶습니다에 하드 코딩

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

PHP list_id 변수를 angularJS 컨트롤러에 전달하여 적절한 목록에서 항목을 요청하여 처음부터 웹 응용 프로그램을 설정할 수있게하십시오.

items.php 파일

[{"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":""}] 

처럼 보이는 내가 사용에 대한 몇 게시물을 발견

을 시도했다 http://listr.npctimes.com/php/items.php?list_id=1

에로드 할 수있는 간단한 JSON을 반환 get 변수를 url에서 꺼내려고 시도하는 위치 변수가 있지만 위치를 사용하려고 할 때마다 전체 컨트롤러가 손상됩니다.

또한 PHP에서 HTML의 숨겨진 요소 값을 설정하고 angularJS 컨트롤러에서 jQuery를 사용하여 추출하려했지만 "정의되지 않은"변수가 발생했습니다.

도움을 주시면 감사하겠습니다. 감사!

Answer 1

Angular를 사용하기로 결정하면 모든 프런트 엔드가 Angular로 구성되어 있기 때문에 PHP은 서버 측이기 때문에 또는 PHP 사이트 또는 그와 비슷한 사이트 링크를 Angular 프런트 엔드에 사용하면 안됩니다. 언어. 그냥 서버 측에 요청을 보내고 데이터를 수신하고 표시합니다 ...

전달/전달 매개 변수에 $routeProvider을 설정할 수 있습니다.에서

당신의 app.js : 당신이 처리 할 수있는, 당신의 itemCtrl에서 지금

<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> 

: 당신이 당신의 홈 페이지에 목록을로드 한 후 다음

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

은 각 항목에 대한 HREF를 설정할 수 있습니다 목록 ID : $routeParams 제공자 :

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 

      } 
     }); 
}); 

이 도움이 되었으면 좋겠습니다. 의견으로 게시 할 수있는 모든 문제가 있습니다.