Forward Everyday

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...

Hello, Angular 2 After couples of Betas and 7 RCs, Angular 2 GA is finally available for production. Angular 2 is a compoenent based frontend framework, and it is completely refactored from Angular 1. You can consider it as a new framework. For those whose have used AngularJS 1.x in projects, Angular team provides official Upgrade Guide from Angular 1.x . To kickstart an Angular 2 project, Angular provides Angular CLI . Angular CLI is a command line tooling to create a new project skeleton and generate Angular 2 facilities thus speed up Angular2 development. In order to get started with Angular 2, you could have to learn the basic knowledge of Typescript language and RxJS. Typescript RxJS Install Angular CLI I assume you have installed the latest NodeJS 7.x and the latest NPM 3.x or above. Install Angular CLI in system globally via npm install command. Note: Angular CLI 1.0.0-beta.28.3 or later, the package name( angular-cli ) was renamed to @angular/cl...

I18n with Angular Translate Your application could be required to support multi-languages. There are a few solutions to support i18n in Angular applications. Angular translate is one of the most populars. Install angular translate packages. npm install --save angular-translate angular-translate-storage-cookie angular-translate-storage-local Next import these files in app.js : //... import ' angular-translate ' ; import ' angular-translate-storage-cookie ' ; import ' angular-translate-storage-local ' ; //... And register angular-translate module. const requires = [ ' pascalprecht.translate ' , //... Configure $translateProvider in app.config.js file. import en from ' ./i18n.en.json ' ; import zh from ' ./i18n.zh.json ' ; function AppConfig ( / ... / , $translateProvider ){ //... // Adding a translation table for the English language $translateProvider . translations ( ' en ' ,...