跳至主要内容

Getting started with Angular 1.5 and ES6: part2

HTTP

In the posts component, the posts data is initialized in th $onInit method of posts controller class.
In a real world application, it could be fecthed from external resources, such as third party APIs. Angular service is a good place to do this work.

Service

Extract posts data codes and put into a standalone class called Post service.
common/services/post.service.js:
class Post {

  constructor() {

  }

  getAllPosts(){
    return [
       { id: 1, title: 'Getting started with REST', content: 'Content of Getting started with REST', createdAt: '9/22/16 4:15 PM' },
       { id: 2, title: 'Getting started with AngularJS 1.x', content: 'Content of Getting started with AngularJS 1.x', createdAt: '9/22/16 4:15 PM' },
       { id: 3, title: 'Getting started with Angular2', content: 'Content of Getting started with Angular2', createdAt: '9/22/16 4:15 PM' },
    ];
  }
In posts.controller.js and call getAllPosts to get all posts data.
class PostsController {
  constructor(Post) {
    'ngInject';

    this._Post = Post;
    ...
  }

  $onInit() {
    console.log("initializing Posts...");
    this.posts=this._Post.getAllPosts();
  }
}  
Note, ngInject in this constructor will tell Webpack to use ngAnnotate to wire its dependencies when loading this class.
In order to make this Post is injectable here, you have to declare it as an Angular service.
Add the following codes into common/services/index.js.
import PostService from './post.service';
//...
let commonServicesModule = angular.module('app.common.services', [])
  //...
  .service('Post', PostService)
  /...
Add commonServices as a dependency of posts module.
let postsModule = angular.module('posts', 
                            [commonSevices,....
Run the application again and make sure it works as before.
Beside Angular service, there are other two facilities existed in Angular: factory and provider. They all can be considered as service, but they are designated for different purposes.
factory applies the Factory pattern in codes, should return a new instance for every call.
We have used providers in before codes, such as $stateProvider. It allow user to configure the service in app.config().
More detailed explanation, read this stackoverflow discussion about difference between service, factory and provider.
Next, let's fetch data from remote APIs.

HTTP

Angular has built-in $http service to shake hands with remote APIs.
To demonstrate HTTP interaction, I used another Java EE 7/Jaxrs REST API sample project I created to serve as backend APIs.
There are some variants in this repository, we used the cdi one in this project.
Follow the Getting started guide to deploy it into a running Wildfly 10.x, it serves several APIs for use.
Uri Http Method Request Response Description
/posts GET
200, [{'id':1, 'title'},{}] Get all posts
/posts POST {'title':'test title','content':'test content'} 201 Create a new post
/posts/{id} GET
200, {'id':1, 'title'} Get a post by id
/posts/{id} PUT {'title':'test title','content':'test content'} 204 Update a post
/posts/{id} DELETE
204 Delete a post
Configure the api base url in app.constants.js file.
const AppConstants = {
  //...
  api: 'http://localhost:8080/blog-api-cdi/api'
};

//...
Inject $http in our Post service, and fecth posts data from our APIs.
class Post {

  constructor(AppConstants, $http, $q) {
    'ngInject';

    this._AppConstants = AppConstants;
    this._$http = $http;
    this._$q = $q;
  }

   query(keyword) {
    let deferred = this._$q.defer();
    // Create the $http object for this request
    let request = {
      url: this._AppConstants.api + '/posts',
      method: 'GET',
      params: !!keyword ? { 'q': keyword } : null
    };

    this._$http(request)
      .then(
        (res) => deferred.resolve(res.data),
        (err) => deferred.reject(err)
      );

    return deferred.promise;
  }

export default Post;  
The GET /posts APIs can accept a query parameter q to search posts in database. query method return a Promise, please read the $q online docs to get more details about the Angular promise.
Modify posts controller class to use query to fetch posts data.
  $onInit() {
    console.log("initializing Posts...");
    this.searchPosts();
  }

  searchPosts() {
    this._Post
      .query(this.q)
      .then(
      (res) => this.posts = res
      );
  }
Now run the applicaiton again, everything should be working as expected.
Check the sample codes.
发表评论

此博客中的热门博文

JPA 2.1: Attribute Converter

JPA 2.1: Attribute Converter If you are using Hibernate, and want a customized type is supported in your Entity class, you could have to write a custom Hibernate Type. JPA 2.1 brings a new feature named attribute converter, which can help you convert your custom class type to JPA supported type. Create an Entity Reuse thePostentity class as example. @Entity @Table(name="POSTS") public class Post implements Serializable { private static final long serialVersionUID = 1L; @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name="ID") private Long id; @Column(name="TITLE") private String title; @Column(name="BODY") private String body; @Temporal(javax.persistence.TemporalType.DATE) @Column(name="CREATED") private Date created; @Column(name="TAGS") private List<String> tags=new ArrayList<>(); } Create an attribute converter In this example…

Spring Data Mongo: bridge MongoDB and Spring

Spring Data Mongo: bridge MongoDB and SpringMongoDBis one of the most popular NoSQL products, Spring Data Mongo(Maven archetype id is spring-data-mongodb) tries to provides a simple approach to access MongoDB. Configuration Add the following code fragments in your Spring configuration. <!-- Mongo config --> <mongo:db-factory id="mongoDbFactory" host="localhost" port="27017" dbname="conference-db" /> <bean id="mongoTemplate" class="org.springframework.data.mongodb.core.MongoTemplate"> <constructor-arg ref="mongoDbFactory" /> </bean> <mongo:repositories base-package="com.hantsylabs.example.spring.mongo" /> Firstly, declare aDbFactorywhich is responsible for connecting to the MongoDB server. Then, register theMongoTemplateobject which envelop the data operations on MongoDB. Lastly addmongo:repositorieswith an essentialbase-packageattribute, Spring will discovery your d…

Auditing with Hibernate Envers

Auditing with Hibernate Envers The approaches provided in JPA lifecyle hook and Spring Data auditing only track the creation and last modification info of an Entity, but all the modification history are not tracked. Hibernate Envers fills the blank table. Since Hibernate 3.5, Envers is part of Hibernate core project. Configuration Configure Hibernate Envers in your project is very simple, just need to addhibernate-enversas project dependency. <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-envers</artifactId> </dependency> Done. No need extra Event listeners configuration as the early version. Basic Usage Hibernate Envers provides a simple@Auditedannotation, you can place it on an Entity class or property of an Entity. @Audited private String description; If@Auditedannotation is placed on a property, this property can be tracked.