Forward Everyday

Create a new post Since Angular2 RC2 introduced a complete new form modules(search @angular/forms in https://npmjs.com ), it allow you use template driven form like Angular 1.x, it also support the programatic approach. In the previous posts, we have create some components, and use HTTP client to fetch data from backend APIs. In this post, we will focus on form submission. Add Post new-post.component.ts : import { Component , OnInit , OnDestroy } from ' @angular/core ' ; import { Router } from ' @angular/router ' ; import { Subscription } from ' rxjs/Subscription ' ; import { Post } from ' ../core/post.model ' ; import { PostService } from ' ../core/post.service ' ; @ Component ({ selector: ' app-new-post ' , templateUrl: ' ./new-post.component.html ' , styleUrls: [ ' ./new-post.component.css ' ] }) export class NewPostComponent implements OnInit , OnDestroy { data = { title: ...

Interact with backend APIs Similar with the serise of Getting started with Angular 1.5 and ES6 , after a glance at Angular2, we will try to fecth data from the real backend APIs. In this Angular2 sample, we still reuse the sample codes of Java EE 7 and Jaxrs RESTful APIs to serve backen RESTful APIs. There are several variants in the root folder of this repository, we use the cdi for our case. Following the Getting started wiki page to deploy it into a running wildfly server. Create a common API service Following the Angular2 Style Guide , we create a CoreModule to share the service like singleton class to the application scope. Create a folder named core under src/app if it does not exist. And enter app/core , use ng to generate the a service naned Api . ng g service api It will create an api.service.ts and an api.service.spec.ts in this folder. Create a module specific purpose file named core.module.ts , fill the following home. import { NgModule ...

Getting Started In the first post , we used Angular CLI to generate the project skeleton, and used ng serve to run this application on Angular CLI built-in webpack dev server. Now we wil add more components, Angular CLI provides ng generate to create a component quickly. Follow the steps that we have done in Getting started with Angular 1.5 and ES6 , we will create a simple blog application. You can get source codes from Github . Generate posts component Enter the project root folder, and generate a new component via: ng g component posts You will see the following info. create src\app\posts\posts.component.css create src\app\posts\posts.component.html create src\app\posts\posts.component.spec.ts create src\app\posts\posts.component.ts By default, it will create a new folder under src\app folder, named posts . And the newly created component will be generated into the posts folder. Have a look at the home of posts.component.ts file. import { Component...