Angular 14.pptx

Angular 14.pptx

• 1.
  NIHIRA TECHIEES Angular 14 CompleteTutorial
• 2.
  Introduction • Angular isa typescript based framework used to create single page web application • Angular is open source no cost involved • It’s maintained by Google also having long term support • Latest Version 14 (2nd June 2022) • Initially start’s from Angular Js .Angular 2 onwards they changed name in to framework
• 3.
  Advantage • Cross platformsupport • Improved speed & performance • Faster Development process • Supports for unit testing • Light weight application • We can use bootstrap & Material UI for better UI
• 4.
  System requirements • Operatingsystem we can use Windows , MAC or LINUX • Node.js latest version 16.15 • Install angular CLI npm install -g @angular/cli • UnInstall angular CLI npm uninstall -g @angular/cli • Installing specific version of angular CLI npm install -g @angular/cli@12
• 5.
  Angular CLI • TheAngular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. • Create First app ng new <application name> • Get all available commands ng help
• 6.
  Components • Basic Components ngg c name • Components Inline style ng g c name –inline-style • Components Inline Template ng g c name –inline-template • Stand Alone Component ng g c name –standalone
• 7.
  Routing • Basic Routing 1,Routes – this is the place for mapping path & component 2, routerLink – this is directive for navigate different routes 3, router-outlet– this is place for display the matched route • Child routing (Group Routing) • Module Routing • Lazy Loading • Redirect 404 page if route not found • Get Route Values
• 8.
  Bindings • Interpolation(data binding)– {{}} • Event Binding - () • Property Binding [] • Two Way binding – [()] • Style Binding
• 9.
  Directive Directives are classesthat add additional behavior to elements in your Angular applications • Components • Attribute Directive 1, NgClass 2, NgStyle 3, NgModel • Structural Directive ngIf ,ngFor,ngSwitch
• 10.
  Topics • Configuration Installation •Create First application • Folder Structure • CLI Commands • Modal • Components • Routing • Lazy Loading • Interpolation • Pipes
• 11.
  Topics • Two waybinding • Property & Style Binding • Event Handling • Directives • Services • Data transfer b/w components • Angular / Route Guard • Consume External API • Interceptor
• 12.
  Topics • Forms inAngular • Material UI • Template Driven forms • Reactive forms • RXjs • State management • Notifications using alertify js • Unit Testing
• 13.
  Implement Authentication • CreateLogin & Signup screen with functions • Activate/Deactivate user by admin user • User CRUD Operations • Implement role based authentication & dynamic menu generations • Implement Refresh Token Logic • New Features in Angular 14 • Interview Questions
• 14.
  New Features inAngular 14 • Standalone component • Typed Forms • Streamlined page title accessibility (TitleStrategy) • Extended developer diagnostics (ng completion) • Bind to protected component members • Optional injectors in Embedded Views • NgModel OnPush
• 15.
  Standalone component • Standalonecomponent has the flag “standalone” we need to set value true • Not required to included in ngModule • We can import required modules in the component it self • Create component using below command ng g c <component name> --standalone
• 16.
  Typed Forms • Thisfeature is only for Reactive forms • For using this feature tsconfig.js should be strict mode • Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface. • This enables safer forms, • especially for deeply nested complex cases. • If you want use older version you can use untyped one
• 17.
  Topic Links • AngularAuthentication – Playlist https://www.youtube.com/playlist?list=PLfyWdpsiUiPD7kYHujLg3Vl6GV69yQP gD • RXJS – Playlist https://www.youtube.com/playlist?list=PLfyWdpsiUiPDuxyDGqAoq0l_T6NlRZq6C • .NET Core API – Video https://www.youtube.com/watch?v=uWhbcR06VcA • Angular Data Transfer b/w components https://www.youtube.com/watch?v=03FqsZ_XJEc
• 18.
  Topic Links • AngularUnit testing https://www.youtube.com/watch?v=dH8BSEGpaOY • Angular State Management https://www.youtube.com/watch?v=gjXjKS7KZ4c https://www.youtube.com/watch?v=x36cNpk7Vjw • Angular Complete tutorial – Playlist https://www.youtube.com/playlist?list=PLfyWdpsiUiPAcHftMr_R0HwSyAVHCW5cR • .NET Core 6.0 playlist https://www.youtube.com/playlist?list=PLfyWdpsiUiPAuKWtjHUIyi-3K_NUW3MM4 QA https://www.youtube.com/watch?v=8HaLNtAWB6M
• 19.
  NIHIRA TECHIEES THANKS FORWATCHING