• Shadow DOM

  In fact, Angular doesn’t use native Shadow DOM by default, it uses an emulation. Most browsers simply don’t support Shadow DOM yet, but we should still be able to use the framework. Even better, we can easily tell Angular to use the native Shadow DOM if we want, View Encapsulation in Angular.

View Encapsulation Types
Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:

• ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation.
• ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation.
• ViewEncapsulation.Native - Native Shadow DOM with all it’s goodness.

To make that Angular doesn’t use Shadow DOM at all. In case adding some attributes to the style so that the style is not rendered well in the browser.

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
    selector: 'app-period',
    templateUrl: './period.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./period.component.scss']
})

• Angular 2 Notes - Modules

• State Management

• The Problem With Concurrency

  Building components which communicate with each other is a typical task involving state. We frequently have to keep up to date with different Angular components interacting with the same state: when more than one component accesses and modifies that state we call it shared mutable state.

• Angular 2 Notes - Modules

• API Service

• First, configure the application to use server communication facilities.

The Angular Http client communicates with the server using a familiar HTTP request/response protocol. The Http client is one of a family of services in the Angular HTTP library.

E.g., main.ts

...
import { HttpModule} from '@angular/http';
//import { HttpModule, JsonpModule } from '@angular/http';
import { App, providers} from './app';
...
@NgModule({
    declarations: [
        App,
        Main
        ],
    providers,
    imports: [BrowserModule, FormsModule, HttpModule], 
    bootstrap: [App]
})

Recently, I am developing Apps by using angular datatables.

The followings are some issues or note that I have to record.

Datatable Options

Selected datatable options…

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withDOM('<"html5buttons"B>lTfgitp')
    .withOption('deferRender', true) // deferred rendering for additional speed of initialisation
    .withOption('deferLoading', true) // delay the loading of server-side data until second draw
    .withOption('processing', true) // add processing indicator
    // change the options in the page length select list.
    .withOption('lengthMenu', [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, 'ALL']])
    .withOption('aoColumnDefs', [{"bVisible": false, "aTargets": [3, 4]}]) //could affect search function
    // .withOption('scrollX', '600px') // add horizontal scroll
    // .withOption('scrollY', '500px') // add vertical scroll 
    // .withOption('scrollCollapse', true) // table collapse on less data
    // .withOption('paging', false) // disable pagination
    // .withOption('searchCols', [null, null, null, { "search": ''}]) // define an initial search for individual columns.
    .withOption('aoColumnDefs', [{"bVisible": false, "aTargets": [3, 4]}]) //enable or disable the display of this column

• Introduction of JHipster MS

1. JHipster Registry
2. Create Microservice
   a. Microservice: Job App
   b. Microservice: Gateway App
3. Security
   a. JWT (JSON Web Token)
4. Access Control
   a. Microservice - Job App API
   b. Microservice - Gateway App API

• Integration of Google FCM Notification

1. Introduction
   a. Key Capability
   b. FCM Message Type
   c. Implementation Path
2. Create FCM Project
3. Server Side Implementation
   a. Server Coding
   b. Server API Test

• Security Configuration

• JHipster Security

  To use Spring Security with a Single Web Page Application, like the ones generated by JHipster, you need Ajax login/logout/error views. We have configured Spring Security in order to use those views correctly, and of course we generate all the JavaScript and HTML code for you.
  By default, JHipster comes with 4 different users:
  “system”, who is mainly used by our audit logs, when something is done automatically
  “anonymousUser”, who is given to anonymous users when they do an action
  “user”, who is a normal user with “ROLE_USER” authorization. His default password is “user”
  “admin”, who is an admin user with “ROLE_USER” and “ROLE_ADMIN” authorizations. His default password is “admin”
  For security reasons, you should change those default passwords.
  More info are provided here: https://jhipster.github.io/security/

• Install JHipster

Requirement: Java 8, Maven, Git, Node.js

Start with installing Yeoman and Bower

npm install -g yo

YEOMAN, the web’s scaffording tool for webapps. Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

npm install -g bower

BOWER, a package manager for the web. Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Bower keeps track of these packages in a manifest file, bower.json.

Then, install Grunt and jHipster

npm install -g grunt-cli

GRUNT, the javascript task runner. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.

npm install -g generator-jhipster

JHipster is a fully Open Source, widely used application generator. Easily create high-quality Spring Boot + AngularJS projects!

• Error: $digest already in progress when calling $scope.$apply()

Raise error when calling $scope.$apply()

$scope.$apply(function () {
    vm.error = 'ERROR';
});

Problem is fixed by calling $timeout instead.

$timeout(function () {
   //code here will run afterwards
   vm.error = 'ERROR';
}, 1);

• QR Code Generator

Utilize google QR code generator …
Define the charset, format, and size.
Use MatrixToImageWriter to write a BitMatrix to BufferedImage, file or stream.