Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
• Javascrip...
Issues
• Unorganized Javascript
• Difficult to track the logic in Javascript
• Complex inter-dependecy in Javascript
• Slo...
AngularJS 1.x design
public interface ClientMasterRestFields
{
enum ClientDetail {
PARTY_ID,
ONTRAC_ID,
GOLDTIER_ID,
Address,
ShortCode,
Accoun...
Angular 2 without Angular 1.x
• Angular2 is totally new concept
• Easy to understand for OOP
• Faster
• Modular with more ...
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...
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 compone...
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 I...
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 --
...
Data Binding
• Event Binding : Component to Template :
(click) – selectUser(user)
• Property Binding : Property (Interface...
Routing
Forms and Validation
Next …
Run sample
@Setup :: You should update your Angular cli version before cloning sample program
npm uninstall -g @angular/cl...
Reference
• 1st week : https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-
by-step-1...
Angular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
Upcoming SlideShare
Loading in …5
×

Angular 4 Introduction Tutorial

Concept , Hello User Application

  • Login to see the comments

Angular 4 Introduction Tutorial

  1. 1. Scott Lee
  2. 2. User Management Program • Model Design • Service Design • UI Design
  3. 3. Model • Class User – ID – Full Name – Employee ID – Role
  4. 4. Service • List • Get by ID • Save • Create • Delete • Search by …
  5. 5. UI • List All Page • View/Update Page
  6. 6. 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
  7. 7. 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 •
  8. 8. AngularJS 1.x design
  9. 9. 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 }; }
  10. 10. 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
  11. 11. New in Angular2 • No two way bindings • TypeScript • Dependency Injection • No Controller  Component • Angular CLI
  12. 12. 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
  13. 13. Design ng generate interface user ng generate component --inline-template people-list
  14. 14. Add Components • ng generate interface user • ng generate component --inline-template user-list • Update User List component
  15. 15. User : Model
  16. 16. User List : Component
  17. 17. User List Component Service Layer user-list.component.ts user.ts User Manager Service Presentation Layer
  18. 18. Creating The UserManagerService • ng generate service userManager –module app • Implement 'getAll()' method • Dependency Injection to UserList Component • ng generate service userManager --module app
  19. 19. UserManagerService
  20. 20. Register Service to AppComponent
  21. 21. Angular 2 Component Lifecycle
  22. 22. Dependency of sources • index.html :: <app-root> • app.component.ts • user-list.component.ts • user.ts
  23. 23. Service • UserManagerService • Register Service in app module • Register Service in app component
  24. 24. Extracting User Details Into Its Own Component • ng g c –it –is user-details • ng generate component --inline-template -- inline-style user-details
  25. 25. Data Binding • Event Binding : Component to Template : (click) – selectUser(user) • Property Binding : Property (Interface) to Component • UserDetailsComponent
  26. 26. Routing
  27. 27. Forms and Validation
  28. 28. Next …
  29. 29. 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/
  30. 30. 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

×