Scott Lee

User Management Program

• Model Design

• Service Design

• UI Design

Model

• Class User

– ID

– Full Name

– Employee ID

– Role

Service

• List

• Get by ID

• Save

• Create

• Delete

• Search by …

UI

• List All Page

• View/Update Page

Existing Solution

• Javascript with Jquery, AngularJS 1.x

• Javascript for UI

• Data binding with DOM or Scope

• Javascript calls HTTP REST API on Server

• Java for Server side logic

• Data Access through Service Layer in Java

Issues

• Unorganized Javascript

• Difficult to track the logic in Javascript

• Complex inter-dependecy in Javascript

• Slow loading

• Long learning curve for Angular 1 and JQuery

•

AngularJS 1.x design

public interface ClientMasterRestFields{

enum ClientDetail { PARTY_ID,ONTRAC_ID,GOLDTIER_ID, Address, ShortCode,AccountDetail,UPDATED_BY,

};

enum Address { SAME_AS_REGISTERED,

ADDRESS_LINE1,ADDRESS_LINE2,ADDRESS_LINE3,CITY,

…PETR_ADDR_ID,VERSION,CONFIRMATION_ID,ENTITY_STATUS,

};

enum AccountDetail {ACCOUNT_ID,PARTY_ID,ONTRAC_ID,GOLDTIER_ID, GOLDTIER_ACCOUNT_ID, PRODUCT_TYPE,PRODUCT_RANGE,ShortCode,Address,ContactInfo,OtherInfo,PRIMARY_IDX,VERSION,XREF_ID,UPDATED_BY, ACKNOWLEDGE_MSG,

};

enum ShortCode {XREF_ID,

ACCOUNT_ID,EXTERNAL_SYSTEM_CODE,EXTERNAL_SYSTEM_NAME,EXTERNAL_KEY,ACCOUNT_REF,GOLDTIER_ACCOUNT_ID,STATUS,VERSION,ENTITY_STATUS,PRODUCT_TYPE_CODE,PRODUCT_RANGE_CODE,

};

enum ContactInfo {CONF_CONTACT_ID,

CONTACT_ID,PETR_ADDR_ID,CONTACT_ADD_ID,FIRST_NAME,LAST_NAME,PHONE_NUMBER,PHONE_EXT,FAX_NUMBER,EMAIL,VERSION,ADDRESS_VERSION,ENTITY_STATUS

};

enum OtherInfo {MFX_CNTRPRTY_TYPE,MFX_CPTY_CLASS,MFX_US_BRNCH,MFX_CA_BRNCH,MFX_SALES_BRNCH,MFX_MRGN_OWNR, MFX_REV_SHRNG_ID,MFX_PYMNT_SUSP,WIRE_FEE,STTLMNT_NET_EMAIL,LANGUAGE_PREFERENCE,

};

enum PropInfo {VALUE,XPREF_PROP_ID, VERSION,ENTITY_STATUS

};}

Angular 2 without Angular 1.x

• Angular2 is totally new concept

• Easy to understand for OOP

• Faster

• Modular with more OO Like for Cleaner Code

New in Angular2

• No two way bindings

• TypeScript

• Dependency Injection

• No Controller Component

• Angular CLI

Get started – Hello User

Install angular CLI

1. @Setup :: You should update your Angular cli version before cloning sample program

2. npm uninstall -g @angular/cli angular-clinpm cache cleannpm install -g @angular/cli@latest

($ npm install -g @angular/cli)

New Project

1. C:\angular2\ng new hello-user

2. @test blank app :: ng serve

3. @index.html

4. @src/main.ts

5. @ platformBrowserDynamic().bootstrapModule(AppModule);

6. @ app.component.ts

7. @ AppComponent

Design

ng generate interface user

ng generate component --inline-template people-list

Add Components

• ng generate interface user

• ng generate component --inline-template user-list

• Update User List component

User : Model

User List : Component

User List Component

Service Layer

user-list.component.ts user.ts

User Manager Service

Presentation Layer

Creating The UserManagerService

• ng generate service userManager –module app

• Implement 'getAll()' method

• Dependency Injection to UserList Component

• ng generate service userManager --module app

UserManagerService

Register Service to AppComponent

Angular 2 Component Lifecycle

Dependency of sources

• index.html :: <app-root>

• app.component.ts

• user-list.component.ts

• user.ts

Service

• UserManagerService

• Register Service in app module

• Register Service in app component

Extracting User Details Into Its Own Component

• ng g c –it –is user-details

• ng generate component --inline-template --inline-style user-details

Data Binding

• Event Binding : Component to Template : (click) – selectUser(user)

• Property Binding : Property (Interface) to Component

• UserDetailsComponent

Routing

Forms and Validation

Next …

Run sample

@Setup :: You should update your Angular cli version before cloning sample program

npm uninstall -g @angular/cli angular-clinpm cache cleannpm install -g @angular/cli@latest

@Download sample :: git clone https://github.com/Vintharas/angular2-step-by-step-01-your-first-component

:: C:\angular2

:: Go to new directory : C:\angular2\angular2-step-by-step-01-your-first-component>ng build

:: npm install

@ Running Server

:: ng serve

@ Test on Browser

:: http://localhost:4200/

@Blog :: Angular 2 code samples for the blog post Angular 2 Step by Step Your First Component http://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/

Reference

• 1st week : https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/

• 2nd week : service : https://www.barbarianmeetscoding.com/blog/2016/03/26/getting-started-with-angular-2-step-by-step-2-refactoring-to-services/

• 3rd week : data binding : https://www.barbarianmeetscoding.com/blog/2016/03/27/getting-started-with-angular-2-step-by-step-3-your-second-component-and-angular-2-data-binding/

• 4th week : routing : https://www.barbarianmeetscoding.com/blog/2016/03/28/getting-started-with-angular-2-step-by-step-4-routing/

• 5th week : forms and validation : https://www.barbarianmeetscoding.com/blog/2016/03/29/getting-started-with-angular-2-step-by-step-5-forms-and-validation/

• Connecting Angular 2 Front to MongoDB : http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/

• Editor : Visual Studio Code - https://code.visualstudio.com/docs/?dv=win