Angularfeatures

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

A component-based framework for building scalable web applications A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more A suite of developer tools to help you develop, build, test, and update your code

Note: AngularJS is the verion 1 of Angular, Angular with Above Version 1 is Just Angular

The Angular Features can be Categorized : - CROSS PLATFORM, SPEED AND PERFORMANCE, PRODUCTIVITY, FULL DEVELOPMENT STORY

1. Progressive Web Apps Use modern web platform capabilities to deliver app-like experiences. High performance, offline, and zero-step installation.

2. Native Build native mobile apps with strategies from Cordova, Ionic, or NativeScript.

3. Desktop Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.

4. Code Generation Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.

5. Universal Serve the first view of your application on Node.js®, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.

6. Code Splitting Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

7. Templates Quickly create UI views with simple and powerful template syntax.

8. Angular CLI Command line tools: start building fast, add components and tests, then instantly deploy.

   1. ng g c <component_name> Command for Creating Component
   2. ng g d <directive_name> Command for Creating Directive
   3. ng g s <service_name> Command for Creating Service
   4. ng g g <guard_name> Command for Creating Guard
   5. ng g r <resolver_name> Command for Creating Resolver
   6. ng g p <Pipe_name> Command for Creating Pipe

9. IDEs Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.

10. Testing With Karma for unit tests, you can know if you've broken things every time you save.

11. Animation Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.

12. Accessibility Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

So We will be Looking These Angular-Routing features and Learn as we go on.

1. Introduction to Angular Routing Setup and Load routes with Router Module in Angular.
2. Navigating Links in the Page using RouterLink in the angular.
3. navigate Between Pages using router programmatically in Typescript.
4. Passing and Fetching Parameter to Routes using ActivatedRoute snapshot in Angular.
5. Fetch Route Parameters Reactively using Params Subscrible with Activated Route in Angular.
6. Passing Query Parameters and Fragments to the URL Route with the template and Program in Angular.
7. Retrieving Query Parameters and Fragments from the URL through typescript code in Angular.
8. Setting up the Child Or Nested Roues using Childeren Key in routing module in the Angular.
9. Preserve or merge the query Parameter by forwording with querypramshandling in Angular.
10. Implement Custom 404 Page adding WildCard Route, redirect to option in the angular routing Module.
11. Separate all the Routing Configuration Code into the another file app-routing.module in the Angular.
12. Introduction to Routing Guards. Implementation of canActivate Route Guard in the angular.
13. Implementation canActictivate Route Guard for the Nested Child Routes in the Angular.
14. Controlling Naviagtion with CanDeactivate Route Guard in the angular.
15. Implementing canDeactivate Route Guard in the real-time scenario for the component.
16. Passsing Static Data to teh Route and Also Access the Static Data in the TypeScript.
17. Get Dynamic Data Before entering inti the component using the resolve Guard in the Angular.
18. How to Use Hash URLs as Fragments in the URL for the internal pages in the Angular routing.

Continuing with Angular RXJS Observables

1. Understand the core of the Observable in rxjs, Need to subscribe and Unsubscribe in the angular.
2. Catch Errors and Complete in rxjs custom Observable using observer.error and complete in angular.
3. Understand rxjs Operators in the observalbes before sending to the subscribe data in angular.
4. Apply multiple operators in teh rxjs Observables, know more about the operators in rxjs angular.
5. UnderStand the subjects in th erxjs angular. Implement the Subject for cross-componenet communication.

Continuing with Angular Forms(Template Driven and Reactive )

Template Driven Form

1. Template Driven Forms in Angular, get NgForm Object from the template to code in Angular.
2. Advantages of Using ViewChild in the Template Driven Form to get Form Object in angular.
3. Explore the Form Object in the Template driven Forms in teh Angular.
4. Validations for the Template Droven Forms. Show Validation Messages for the From in Angular.
5. Using ngModel for Two Way and one way Binding to Populate Data in template Driven Forms.
6. NgModelGroup - Grouping the From Controls in template Driven Forms using ngModelGroup in angular.
7. setValue and patch Value for Populating Form Elements in the Template Driven form in Angular.
8. Get and Reset the form Data Controlls in the template Driven Forms in the Angular.

Reactive Form

1. Introduction to reactive Forms Approach. Create FormGroup and FormContreol with code in Angular.
2. Attach the HTML File using the FormGroup with FormControlName using Reactive Forms in Angular.
3. Apply Validations for Reactive Forms and Also show messages in teh HTML Template.
4. Grouping the contrls in the Reactive Forms using FormGroupName.

Pipes

1. Pipes in Angular, Chaining Multiple Pipes, parameterized Pipes in the Angular.
2. Create a Custom Pipe and pass Parameters to the Pipe in Angular using Transaform method.
3. Creating Filter Pipe in teh Angular, Filter the list of Data with Search String in Angular.
4. Pure and Impure Pipes, Differences Betwen the pure pipe and impure pipe in the Angular.

HTTP Request

1. Introduction to Http Requests, Make a Http Post Request Call through HttpClientModule - Angular..
2. Make Get Requests and use RXjs Operators to transform the respiosne in the Angular.
3. Define the Tyoes of HttpClient Requests data using in the interface and Generic Tyoes in the Angular.
4. Using Service for the Http request with HttpClient. Communicates Services and Componenets in Angular.
5. Implement HTTP Delete rtequest with HttpClient in Angular.
6. Error Handling in teh Http Request Calls with HTTPClinet - Angular.
7. Sending HTTP Headers in the API Request Call with HTTPClinet in The Angular.
8. Adding Query Params for the URl using HttpParams Object in HttpClient - Angular.
9. Observe different types of response in HttpClinet and Chnaging the response Body Type.
10. Introducing HTTP Interceptors using HTTP_INTERCEPTORS in Angular.
11. Manipulating Request Objects, headers with Interceptors in the angular.
12. Accessing Http Response Event Object with Response Interceptor in the Angular.
13. Adding Multiple Interceptors for the Http Request. interceptors executing order in Angular.
14. Authentication - Design the auth (Login) page in te angular.
15. Apply reactiveForm and implememnt validation for the Authentication.
16. Authentication - Perform Signup Request and get the token and expires as Response - Angular.
17. Authentication - Add Loading Spinner and error Message in the Signup Request Form - Angular.
18. Authentication - Improve Error Messages with catchError and throwErro rxjs operators.
19. Authentication - Send the login request and use Observable for the HTTP in the angular.
20. Authetication - Improve Error handling for the Login Form in the Angular.
21. Authentication - Create and Store the User Token Data in the angular.
22. Authentication - Update the UI with Auth Token Data using the Subject in the Angular.
23. Authentication - Send Auth Token to the outgoing HTTP Requests with behavior Subject - Angular.
24. Authentication - Add the Auth Token as paramerter using interceptors - Angular
25. Authentication - Adding the Logout functionality by removing the authtoken in angular.
26. Authentication - Saving Token in LocalStorage for the autologin feature - Angular.
27. Authentication - Auto Logout the user when the token expired - Angular.
28. Authentication - Proetcting the routes with canActivate Guard using UrlTree

Extra Features

1. Create Alert Modal Components to show the Errors om the Angular
2. Create Component Dynamically usinh ComponentFactory resolver and ViewContainerRef in Angular
3. Create Component using ViewContainerRef and Deprecation of entry components from angular 9
4. Access the component Properties and methods with ComponentRef instance in Angular
5. What are Modules. Module Introduction. Analyzing the AppModule in Angular.
6. Creating the Feature Module by Splitting the components in the angular.
7. Difference Between the Common Module and BrowserModule along with Feature Module in the Angular.
8. Adding Routes to the Feature Module. forChild, forRoot differrnces in Router Module.
9. Add More Feature modules for the Project in the angular.
10. Create Shared Modules. Difference Between Deature Module and Shared Module in angular.
11. Understand Core Module, Move all Services, interceptors from appModule to CoreModule - Angular.
12. Implement lazy-Loading for Modules in the Angular to increase the performance of the project.
13. Loading Service Differently for instances in the lazy Loaded Modules and app Modules - Angular.
14. Just In Time Compiler(JIT) and Ahead of Time Compiler(AOT) for Production in Angular.

Completing basic and Slightly Advanced Angular Concepts. continuing with More Advanced Features.

Follow the Below Steps

Note:- Before Starting with this Project, Please make sure you have installed latest stabled version of Nodejs Application in your System

For Installation of Angular CLI and Running the Angular Application Please run the below Commands in you System

Installing Angular CLI

Install the CLI using the npm package manager: npm install -g @angular/cli

Create Angular Project

To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands: ng new my-first-project

Development server

To Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.