- https://nodejs.org/en/download/
- Go for LTS (Long Term Support)
- Select Windows Binary (.zip)
- UnZip in any directory, then set this directory in PATH of Environment Variables.
- e.g; D:\Development\node-v18.13.0-win-x64
- Now check; node -v from terminal, you should see version.
- Make sure prefix is correct here;
- C:\Users<name>.npmrc
- go to CMD of any directory where you want to store typescript.
- e.g; D:\Development\typescript-folder
- type; npm i typescript
- It will download typescript in the folder, now go to this folder e.g;
- D:\Development\FrontEnd\typescript-4.9.4\node_modules.bin
- Put above path in PATH of Environment Variables.
- Now check tsc -v from terminal, you should see version.
- npm install @angular/cli
- Make sure to check version using 'ng version' from cmd
- Whole page is not refreshed like in aspx/jsp.
- On URL change page is not refreshed however it changes view as the resource is on the client side.
- Angular has its own routing library; Angular/router
- Full reload does not happen.
- However partial reload of the view happens.
npm yarn pnpm
- Node provides a lightweight web server to spin up the Angular Application.
- Node provides npm (comes by default with node) which manages all the dependencies of the application.
- npm provides Agular CLI which is used to build application easily
- Loose equality check vs Strict equality check
- == does type conversion that's why not safe.
- === always returns false for different types.
- Optional Parameter can not be declared before a required param.
- Required Parameter can be declared at any position, as it contains a default value.
- Rest Parameter must be the last param of the method.
-
If a method does not have a return type in signature, but it returns something, then this method will return the value.
-
If a method is declared with void return type, then adding a return statement gives CTE.
-
If arg-constructor is defined, then declaring a no-arg constructor will give CTE.
-
Declaring a function inside a class does not need function keyword, it gives CTE.
-
When a method (named function) is bound to the prototype, only one instance of that method is ever created, and is executed contextually by the caller instance.
-
When using closures, the method (arrow function) is created per-instance and enclosed within the constructor function. Closure based methods have the advantage of being able to access private instance members outside the scope of their execution, which is not possible with prototype bound methods, however prototype bound methods tend to perform better.
-
If no datatype is assigned to a variable then it becomes any, which we should avoid.
- e.g: address!: string;
- e.g: #id: number;
- e.g: export interface User { id: number; age?: number; }
CS Modules: declare objects with export, so they can be used outside that class. where we need to use, we need to import.
- Use classes when we want to retain the Type and interfaces when we don't.
- JavaScript does not have interface.
- It is advised to use class.
- It is an experimental feature. It is used interanlly by Angular. It is used to change behaviour of propterty, method or class at runtime.
- @NgModule, @Component
- noEmit = no output on transpiling ts files
- outDir = output directory for js files
- sourceMap = for debugging TS files in browser
- both extend tsconfig.json, 1 is used in test case compilation, 2 is used in application code compilation.
- it needs to be updated incase any packages are updated. It is used in CI processes.
- single repository/workspace with multiple projects/libraries. e.g., Admin Module and Customer Application in same workspace.
- [any directives, components, pipes need to be added here]
- [any angular module to be used, needs to be added here as well]
- [Component, angular needs to know which component is to load first]
- angular needs at least 1 root module, that is why we use a Decorator @NgModule which tells Angular that our application used which components.
- angular also needs at least 1 root component. Component is a view that is rendered to the end user.
- With each component, we need 4 files;
- app.component.ts
- app.component.spec.ts
- app.component.scss
- app.component.html
- To avoid conflict with any other tag, native, html or any library.
-
Interpolation
- We can use Interpolation for basic Datatypes or even object
-
Welcome, to {{hotelName}}
{{hotelAddress}}, {{hotelPostalCode}}
-
Property Binding
- It is to be used with a valid property of any valid HTML tag.
- box syntax []
- "<div [innerText]="hotelName">"
-
Event Binding
- To interact with end user like to save, submit, toggle, etc
- <button (click)="anyFunctionName()">I do magic!!
- A reusable function that can change the behaviour or appearance of a dom element.
- It can implement all lifecycle hooks.
- It does not have a template. It just contains logic.
- Structural Directives: a- these are costlier, because they change/modify/add or remove the element in a DOM. b- can be identified with *, like; *ngIf, *ngFor, *ngSwitch
- Attribute Directives: a- can modify/add/remove properties of an element or add some logic to it, but cant remove it from the DOM.
- Used to transform the data at runtime.
- number pipe, uppercase pipe, lowercase pipe, titlecase pipe, currency pipe, date pipe, json pipe
- ng new appName
- ng generate component componentName
- ng new appName --prefix prefixYouWantToUseInsteadOfDefault-app
To up and run the application:
- ng serve -o