2013-11-26 17 views
5

Blog benzeri bir web sitesi oluşturmak için angularjs'i kullanma konusunda biraz şaşırdım. Sıradan bir blog düşünüyorum ,,, ve dersenizAngularjs - dinamik sayfalar, aynı şablon, kimliğe göre makaleye erişme ve yüklenme

,, ben php ve mysql kullanarak inşa ediyorum .. ne anlamıyorum ben açısal bir makale kimliği temel almak yapmak yaparız ..

Ben (statik json itibaren) tek bir sayfa için veri yükleyebilir .. tüm makalelerin bir listesi için veri yükleyebilir ,, ben http istekleri göndermek için anlamak ,, ama nasıl

mysite.com/page?id=1 or 
mysite.com/page?id=2 or 
mysite.com/page?id=3 
erişirim

Açıkçası, her bir ayrı blog yazısı için aynı şablonu yüklemek istiyorum. Ancak henüz bunu açıklayan tek bir örnek görmedim.

Veritabanımda, 1,2,3 kimlikli üç gönderi varsa, her bir makaleye bağlantı oluşturmak için açısal yöntem nedir? URL'leri birleştirmek için veri yükleyebileceğimi, ancak hangi URL'leri yükleyebileceğimi anladım. Sanırım yönlendirme ile kafam karıştı.

Bunun basit ve anlaşılır bir örneğini önerebilir misiniz? Bunun hakkında düşünmeyi önerebilir misin?

Teşekkürler!

cevap

10

gibi görünmelidir. Propably somwhere uygulamanızda o kod yakın olan kontrolörler modülü oluşturuldu:

var blogControllers = angular.module('blogControllers', []); 

// other controllers etc. 

blogControllers.controller('BlogPostCtrl', ['$scope', 
// more and more of controller code 
Biz bir an geri burada olacak

:) Eğer kontrolörler modülü varsa, belirli denetleyiciye bağlı bir rota oluşturabilirsiniz:

var blogApp = angular.module('blogApp', [ 
    'ngRoute', 
    'blogControllers' 
]); 

blogApp .config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     // other routes 
     when('/post/:postId', { 
     templateUrl: 'partials/blog-post.html', 
     controller: 'BlogPostCtrl' 
     }). 
     // other... 
    }]); 

Eh ama biz bu :postId parametre ile neler yapabileceğini? Bizim kontrolöre geri dönmek sağlar: Gördüğünüz gibi

blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost', 
    function($scope, $routeParams, BlogPost) { 
    $scope.post = BlogPost.get({postId: $routeParams.postId}); 
    }]); 

, burada $routeParams geçiyoruz ve bizim BlogPost kaynak (o açıklanacaktır). $routeParams'da sadeleştirme (tekrar), tam yol için $routeProvider'a koyduğunuz tüm parazitlere sahiptir (örneğimizde :postId).

denetleyicisi bizim BlogPost ne
var blogServices = angular.module('blogServices ', ['ngResource']); 

blogServices.factory('BlogPost', ['$resource', 
    function($resource){ 
    return $resource('action/to/get/:postId.json', {}, { 
     query: {method:'GET', params: { postId: 'all' }, isArray:true} 
    }); 
    }]); 

Şimdi biliyor: Biz) ngResource kullanıyorsunuz sen (uygulamanıza services and/or factories ekleyip bakmak gerekir)

İlk; Biz id, şimdi sihir var :) postId için varsayılan değerin gördüğünüz gibi "all" ve evet, bizim api postId = "all" için tüm mesajları almalı. Elbette bunu kendi tarzınızda yapabilir ve bunu iki fabrikaya, detaylar için ve liste/dizin için ayırabilirsiniz.

Tüm blog adları nasıl yazdırılır? Oldukça basit. Herhangi bir özel params olmadan liste yönlendirmesi ekleyin. Bunu nasıl yapacağınızı zaten biliyorsunuz, onu geçelim ve liste denetleyicimize devam edelim:

blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost', 
    function($scope, BlogPost) { 
    $scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts 
    }]); 

Voila! Bizim $scope değişkenindeki tüm mesajlar!

<ul class="blog-posts"> 
    <li ng-repeat="blogPost in blogPosts"> 
     <a href="#/post/{{blogPost.id}}">{{blogPost.title}}</a> 
    </li> 
</ul> 

Ve bu o :) Bence çok kolay angularjs bulursunuz: Bu sayede onlar Şimdi sadece örnek olarak, bizim görünümünde bu yayınları yinelemek gerekiyor :) şablon/görünümünde erişilebilir Şimdi! Şerefe!

+0

Çok teşekkürler! Hala biraz mücadele ediyorum ama gittiğim kadar kolaylaşıyor. Kimlik doğrulamayı ve birkaç şeyi daha iyi hale getirmem gerekiyor ve daha iyi olacak. – GRowing

2

Bunun için kullanmak istediğiniz şeyin $ routeParams olduğunu düşünüyorum.

http://egghead.io/lessons/angularjs-routeparams

+0

Bu video, bir denetleyiciye parametrelerin nasıl iletileceğini açıklar. Ardından, blog içeriğinin veya posta içeriğinin HTML'sinin alınması için bir AJAX çağrısı yapmak için bu parametreyi kullanmanız gerekir. – jessegavin

+0

Tamam, bağlantılarımı oluşturmak ve parametreleri aktarmak için bunu nasıl kullanabileceğimi görüyorum. Bununla oynayacağım. AJAX dediğin zaman angularjs $ http? Eylemde görmeyi çok isterdim ama bu video biraz yardımcı oluyor. – GRowing

1

Bu karma navigasyon kullanmak iyi bir uygulamadır: nasıl kullanılacağını açıklayan egghead.io gelen bu videoya bakın. Yani yönlendirme Ben official tutorial dayalı örnekler kullanacak bu kısa açıklamada bu

mysite.com/blog/#!/id=1 
mysite.com/blog/#!/id=2 
İlgili konular