In dieser kurzen Erklärung werde ich Beispiele auf official tutorial basiert. Vermutlich somwhere in Ihrer Anwendung erstellt Sie Controller-Modul mit Code nahe an:
var blogControllers = angular.module('blogControllers', []);
// other controllers etc.
blogControllers.controller('BlogPostCtrl', ['$scope',
// more and more of controller code
Wir kommen wieder hier in einem Moment sein wird :) Wenn Sie Controller-Modul haben, können Sie eine Route zu dem bestimmten Controller verknüpft erstellen:
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...
}]);
Nun aber, was wir mit diesem :postId Parameter tun kann? Lässt unseren Controller zurück:
blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
function($scope, $routeParams, BlogPost) {
$scope.post = BlogPost.get({postId: $routeParams.postId});
}]);
Wie Sie sehen, sind wir $routeParams hier vorbei und dann unsere BlogPost Ressource (es wird erklärt werden). Simplifying (wieder), in $routeParams haben Sie alle Parameter, die Sie in die $routeProvider für die genaue Route setzen (so :postId in unserem Beispiel). Wir haben die ID, jetzt die Magie passiert;)
Zuerst müssen Sie services and/or factories Ihrer App hinzuzufügen (und zu sehen, wir sind mit ngResource):
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}
});
}]);
Jetzt wissen Sie, was unser BlogPost in Controller :) Wie Sie sehen, ist der Standardwert für postId "all" und ja, unsere API sollte alle Posts für postId = "all" abrufen. Natürlich können Sie dies auf Ihre eigene Weise tun und dies auf zwei Fabriken aufteilen, eine für Details und eine für Liste/Index.
Wie alle Blog-Namen gedruckt werden? Ziemlich einfach. Fügen Sie Listenrouting ohne spezielle Parameter hinzu. Sie wissen bereits, wie das geht, also lassen Sie es überspringen und fahren Sie mit unserem Listen-Controller fort:
blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
function($scope, BlogPost) {
$scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
}]);
Voila! Alle Beiträge in unserer $scope Variable! Dank dieser Tatsache sind sie zugänglich in der Vorlage/view :) Nun müssen wir nur noch jene Beiträge aus unserer Sicht iterieren, zum Beispiel:
<ul class="blog-posts">
<li ng-repeat="blogPost in blogPosts">
<a href="#/post/{{blogPost.id}}">{{blogPost.title}}</a>
</li>
</ul>
Und das ist es :) Ich hoffe, Sie AngularJS ganz einfach finden jetzt! Prost!
Vielen Dank! Ich kämpfe immer noch ein wenig, aber es wird einfacher, wenn ich gehe. Ich muss Authentifizierung und ein paar andere Dinge meistern und es wird besser werden. – GRowing