Angular 4 Introduction Tutorial
- 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 •
- 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
- 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
- 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