Angular 2 with ZK

With the emerging of reactjs and angular2, zk and other old ui java frameworks are standing before of going to history library but now angular2 has been integrated into zk and make it having more custom chosen for users so that zk framework is still used for maintainance and new java projects.

Angular 2 is integrated in zk by using  client command binding to communicate with a Java ViewModel at the server-side.

Read More

Angular in Netbeans IDE

Requirements:

• Netbeans IDE 8.2
• Git-2.20.1-64-bit
• npm installed
• netbeanstypescript-2.x.nbm

Run commands:

 npm install -g bower
 npm install -g typescript

Source: detail at https://www.tutorialjinni.com/angular-2-netbeans-8.2-typescript-hello-world-example.html

Read More

Angular 7 vs React

Angular is a fully-fledged MVC framework, while React is simply a JavaScript library. This post compares what each one gives you, what you need to learn, and when to choose which.

What you get out of the box

Angular provides

• Templates, based on an extended version of HTML
• XSS protection
• Dependency injection
• Ajax requests via @angular/http
• Routing via @angular/router
• Component CSS encapsulation
• Utilities for unit-testing components
• @angular/forms for building forms
• "Write once, run everywhere"

React provides

• JSX, an XML-like language, instead of classic templates
• JavaScript
• XSS protection
• No dependency injection
• fetch for Ajax requests
• Utilities for unit-testing components
• "Learn once, write anywhere"

Read More

Add Kendo UI into Angular Quickstart sample

SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.

To use Kendo UI components for Angular with SystemJS, you have to explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.

The source code for the completed sample project is available on GitHub at telerik/kendo-angular-quickstart.

Read More

Beginning Kendo UI

1. What is Kendo UI

Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library. It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements.
Install kendo ui core for jsp anh html application:

• Step 0 Dowload from https://github.com/telerik/wrappers-getting-started/tree/master/jsp/jsp-episode1/WebContent OR Download full files from download any of the Kendo UI bundles to local computer. 
• Step 1 Extract the /js and /styles directories from the bundle archive and copy them to your web application root directory.
  Step 2 Include the Kendo UI JavaScript and CSS files in the head tag of your HTML document. Verify that the common CSS file is registered before the theme CSS file.
• Step 3 Initialize a Widget.
  The following example demonstrates how to initialize the DatePicker widget.
  

Read More

Spring Boot REST + Angular 2 + JPA + Hibernate + MySQL CRUD Example

We will create a REST web service application using Spring Boot and a client application using Angular 2. REST web service will expose methods for create, read, update and delete operation. The Angular application will use Angular Http API for CRUD operation. If our client application is running on different domain from web service domain, then the Spring Boot web service controller will configure client domain URL using @CrossOrigin annotation to handle Cross-Origin-Resource-Sharing (CORS). In our Spring Boot application, we will configure database using application.properties file. To interact with database we will use JPA EntityManager.

There are back-end application using spring-boot rest api and front-end application using Angular 2.

Read More

Connecting your Angular 2 App to your Java EE Backend

1. Introduction

You’ve been developing in Java EE all this time, but you’re tired of using JSF, or perhaps even Struts, and want to move to something more modern for your front end? Angular 2 is a perfect fit, and with the recent release of Angular 2 GA, now is the ideal time to make the move! Besides being easier to develop and maintain, an Angular 2 application allows you to take advantage of the huge improvements in browser technology over the last few years, and all the goodness that the modern web brings.

Broad Strokes

We will be working with two separate applications, a Java EE back-end app, and an Angular 2 front-end app, avoiding a mixing of concerns in a single project. Source for both projects is provided, so in this article we display and highlight source only for key concepts – you can download the projects to look at more detail, or run them locally.

Key technologies:

• JPA: Our sample Java EE application uses JPA to access data from a database.
• REST: We expose the table data via REST web services using Jersey – the reference implementation for the JAX-RS spec.
• RxJS: Our Angular 2 app uses RxJS to communicate with the web services.
  

Read More

HTML attribute vs. DOM property in Angular

1-HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

• A few HTML attributes have 1:1 mapping to properties. id is one example.
• Some HTML attributes don't have corresponding properties. colspan is one example.
• Some DOM properties don't have corresponding attributes. textContent is one example.
• Many HTML attributes appear to map to properties ... but not in the way you might think!

Read More

Angular quick-reference guide

🇬🇧 English Version

A quick-reference guide to the core concepts of Angular: Observables, RxJS, NgModules, Dependency Injection, HttpClient, Router, and Animations.

Table of contents

1. Observables
2. The RxJS library
3. Observables in Angular
4. Observables compared to other techniques
5. Bootstrapping
6. NgModules
7. Entry Components
8. Providers
9. Singleton services
10. Lazy loading feature modules
11. Dependency Injection
12. HttpClient
13. Routing & Navigation
14. Angular animations
15. Setup, deployment & upgrading

Read More

Angular Forms

Introduction to forms in Angular

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Reactive and template-driven forms differ, however, in how they do the work of processing and managing forms and form data. Each offers different advantages.
In general:

• Reactive forms are more robust: they are more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
• Template-driven forms are useful for adding a simple form to an app, such as an email list signup form. They are easy to add to an app, but they do not scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

Read More