基於JSON數據生成頁面

我正在使用AngularJS創建一個應用程序，並且想知道是否有可能在將項目推送到名爲places的JSON對象時生成頁面。每個項目推送時都會給出一個唯一的ID，我想我可以使用此ID（例如123456）作爲URL的一部分，如site.com/places/123456。基於JSON數據生成頁面

{ 
    "places" : [ 
    { 
     "id" : 471756, 
     "title" : "The Whittington Hospital" 
    } 
    ] 
}

是否可以自動生成此頁面（例如，基於模板）？

我問，因爲我試圖建立一個應用程序，讓用戶通過窗體創建他們自己的醫院。一旦醫院被創建並推送到JSON對象，我想爲該醫院創建一個頁面。

我可以爲此使用Angular嗎？任何幫助表示讚賞。

提前致謝！

UPDATE

仍然有一點麻煩與此有關。這是迄今爲止我所擁有的。

place.html

<div ng-controller='PlaceCtrl'> 
    <h1>{{ title }}</h1> 
</div>

app.constant('FBURL', 'https://luminous-fire-8685.firebaseio.com/'); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/places/:placeId', { 
     templateUrl: 'views/place.html', 
     controller: 'PlaceCtrl' 
    }) 
}]); 

app.factory('place', function($firebase, FBURL, $routeParams) { 
    var ref = new Firebase(FBURL + "places/" + $routeParams.placeId); 

    return { 
    id: $routeParams.placeId 
    } 
}); 

app.controller('PlaceCtrl', function($scope, $rootScope, FBURL, $firebase, $location, $routeParams, place) { 
    $scope.placeId = place.id; 
});

來源

2014-10-31 realph

是的......只是創建一個標準的模板？使用'{{}}'把數據發送到視圖 – tymeJV 2014-10-31 16:10:25

@tymeJV你能指點我一些文檔的方向嗎？另外，Angular應用程序有多大？有沒有限制，或者你應該使用Rails/PHP來代替它？ – realph 2014-10-31 16:50:59

您正在尋找ngRoute和$routeProvider。有了這些，你可以建立這樣的參數路線：

.when('/place/:placeId', { templateUrl: 'place.html', controller: 'PlaceCtrl' })

所以每次訪問者點擊與/place/開始它在PlaceCtrl和place.html結束的URL。地點ID作爲參數傳遞。

然後你就可以拿起參數控制器：

app.controller('PlaceCtrl', function($scope, FBURL, $firebase, $routeParams) { 
    var ref = new Firebase(FBURL+"places/"+$routeParams.placeId);

參見：https://github.com/puf/trenches/blob/master/app.js（來自我複製/粘貼：使用AngularJS，火力地堡和AngularFire

我的示例應用程序/修改了上面的片段）
The AngularJS documentation for routeParams
AngularJS tutorial's step on routing
（方式更好）Thinkster.io tutorial page on routeParams

來源

2014-10-31 19:52:26

這非常有幫助。回覆晚了非常抱歉。馬上試着嘗試一下！ – realph 2014-11-03 12:46:22

我已經爲我的問題添加了更新。我一直在使用示例應用程序作爲參考，但我似乎無法獲得在相關頁面上顯示的{{title}}。任何想法我做錯了什麼？ – realph 2014-11-07 13:58:56

您'PlaceCtrl'僅將'placeId'綁定到作用域，所以在視圖中沒有'title'作用域來顯示。您可以使用Chrome中的Angular devtools輕鬆調試這種類型的東西。 – 2014-11-07 14:20:55

基於JSON數據生成頁面

回答

相關問題