Concept , Hello User Application

1. Scott Lee

2. User Management Program
• Model Design
• Service Design
• UI Design

3. Model
• Class User
– ID
– Full Name
– Employee ID
– Role

4. Service
• List
• Get by ID
• Save
• Create
• Delete
• Search by …

5. UI
• List All Page
• View/Update Page

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

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

9. AngularJS 1.x design

10. 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
};
}

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

12. New in Angular2
• No two way bindings
• TypeScript
• Dependency Injection
• No Controller  Component
• Angular CLI

13. 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-cli
npm cache clean
npm install -g @angular/cli@latest
($ npm install -g @angular/cli)
New Project
1. C:angular2ng 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

14. Design
ng generate interface user
ng generate component --inline-template people-list

15. Add Components
• ng generate interface user
• ng generate component --inline-template
user-list
• Update User List component

16. User : Model

17. User List : Component

18. User List
Component
Service Layer
user-list.component.ts user.ts
User Manager
Service
Presentation Layer

19. Creating The
UserManagerService
• ng generate service userManager –module
app
• Implement 'getAll()' method
• Dependency Injection to UserList Component
• ng generate service userManager --module
app

20. UserManagerService

21. Register Service to
AppComponent

22. Angular 2 Component Lifecycle

24. Dependency of sources
• index.html :: <app-root>
• app.component.ts
• user-list.component.ts
• user.ts

25. Service
• UserManagerService
• Register Service in app module
• Register Service in app component

27. Extracting User Details Into
Its Own Component
• ng g c –it –is user-details
• ng generate component --inline-template --
inline-style user-details

28. Data Binding
• Event Binding : Component to Template :
(click) – selectUser(user)
• Property Binding : Property (Interface) to
Component
• UserDetailsComponent

29. Routing

30. Forms and Validation

31. Next …

32. Run sample
@Setup :: You should update your Angular cli version before cloning sample program
npm uninstall -g @angular/cli angular-cli
npm cache clean
npm 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:angular2angular2-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/

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