Getting Started with AngularJS1.5 and ES6:part5
Apply Container/Presenter patternIf you have used React,you could be fimilar with Container/Presenter pattern. The presenter component is responsive for rendering view and notifying event handlers to handle events. The container component handles events,interacts with external resources,eg,in a React application,the container is the glue codes with Redux. In this post,I just try to split component into small components by different responsibilities. Go back to post detail component as an example. The post details view includes three sections:
We can create three components for this page.
Replace post detail template with the following: <post-detail-card post="$ctrl.post"></post-detail-card> <post-comment-list comments="$ctrl.comments"></post-comment-list> <post-comment-form on-save-comment="$ctrl.saveComment($event)"></post-comment-form> post-detail-card shows the post detail. post-detail-card.html: <div class="page-header"> <h1 class="text-xs-center text-uppercase text-justify"> {{$ctrl.post.title}} </h1> <p class="text-xs-center text-muted">{{$ctrl.post.createdAt|date:'short'}}</p> </div> <div class="card"> <div class="card-block"> <p> {{$ctrl.post.content}} </p> </div> <div class="card-footer"> back to <a href="#" ui-sref="app.posts">{{'post-list'}}</a> </div> </div> post-detail-card.component.js: import template from './post-detail-card.html'; let postDetailCardComponent = { restrict: 'E',bindings: { post: '<' },template }; export default postDetailCardComponent; We use
Lets have a look at CommentList. post-comment-list.html: <div class="card" ng-if="$ctrl.comments"> <div class="card-block"> <post-comment-list-item comment="c" ng-repeat="c in $ctrl.comments"></post-comment-list-item> </div> </div> post-comment-list.component.js: import template from './post-comment-list.html'; import controller from './post-comment-list.controller.js'; let postCommentListComponent = { restrict: 'E',bindings: { comments: '<' },template,controller }; export default postCommentListComponent; It is very similar with post-detail-card component. But we use another component post-comment-list-item in the comment list iteration. post-comment-list-item.html: <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="../" alt="..."> </a> </div> <div class="media-body"> <h6 class="media-heading">{{$ctrl.comment.createdBy}} ? {{$ctrl.comment.createdAt}}</h6> <p> {{$ctrl.comment.content}}</p> </div> </div> post-comment-list-item.component.js: import template from './post-comment-list-item.html'; let postCommentListItemComponent = { restrict: 'E',bindings: { comment: '<' },template }; export default postCommentListItemComponent; Now,move to comment-form component. post-comment-form.html: <div class="card"> <div class="card-block"> <form id="form" name="form" class="form" ng-submit="$ctrl.saveCommentForm()" novalidate> <div class="form-group" ng-class="{'has-danger':form.content.$invalid && !form.content.$pristine}"> <!--<label class="form-control-label" for="content">{{'comment-content'}} *</label>--> <textarea class="form-control" type="content" name="content" id="content" ng-model="$ctrl.newComment.content" rows="8" required ng-minlength="10"> </textarea> <div class="form-control-feedback" ng-messages="form.content.$error" ng-if="form.content.$invalid && !form.content.$pristine"> <p ng-message="required">Comment is required</p> <p ng-message="minlength">At least 10 chars</p> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-lg" ng-disabled="form.$invalid || form.$pending"> {{'save'}} </button> </div> </form> </div> </div> post-comment-fom.component.js: import template from './post-comment-form.html'; import controller from './post-comment-form.controller.js'; let postCommentFormComponent = { restrict: 'E',bindings: { onSaveComment: '&' },controller }; export default postCommentFormComponent; post-comment-form.controller.js: class PostCommentFormController { constructor($scope) { 'ngInject'; this._$scope = $scope; this.newComment = { content: '' }; } saveCommentForm() { this.onSaveComment({$event: this.newComment}) .then( (res) => { this.newComment = { content: '' }; this._$scope.form.$setPristine(); } ); } } export default PostCommentFormController; In before components,we do not use controllers. In this Comment Form component,we need to call the callback method and wait for the result,and then clean the comment form when the comment was added successfully. The comment data can be transfered via a In the post-detail components,it receives saveComment(event) { console.log("saving comment...@"); let deferred = this._$q.defer(); this._Post.saveComment(this.id,event) .then((res) => { //refresh comments by post. console.log('saved comment.'); this._Post.getCommentsByPost(this.id) .then((res) => { console.log('refresh comments list...'); this.comments = res; this._toastr.success('Comment was added!'); deferred.resolve(res); }); }); return deferred.promise; } Register all new components in components/posts/index.js: //... import postDetailCardComponent from './post-detail-card.component'; import postCommentListComponent from './post-comment-list.component'; import postCommentListItemComponent from './post-comment-list-item.component'; import postCommentFormComponent from './post-comment-form.component'; //... let postsModule = angular.module('posts',[commonSevices,uiRouter]) //... .component('postDetailCard',postDetailCardComponent) .component('postCommentList',postCommentListComponent) .component('postCommentListItem',postCommentListItemComponent) .component('postCommentForm',postCommentFormComponent) //... With this,all new added components(post-detail-card,post-comment-form,post-comment-list,post-comment-list-item) are only responsive for rendering view and triggering event handlers,and post-detail handles the input and output. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |