Angular - Typescript

 Typescript:

• It is a programming language used to develop Angular applications
• But it will be converted to Javascript before the browser executes
• It is developed by Microsoft

Advantages of Typescript:

• It is an open-source language
• Superset of Javascript - i.e. It has the features of javascript with additional features
• Strongly typed - everything has type
• Class / Object-oriented programming language

To Practice Typescript

https://www.typescriptlang.org/play

Angular - Anatomy Of Angular Application (Component)

The angular application comprises of Multiple components and Services. Services provide common functionalities to your components.

Angular Application Skeleton

Components:

The component is a class with a template and decorator

Components are made up of template, class and MetaData

• Template - Defines UI. Contains HTML, Bindings and directives 
• Class - Same as C# or any OOPS class which can be written using Typescript
• Contains Properties and Functions
• Properties provide data to Template and function provides logic to Template
• MetaData - Class will be decorated with MetaData (Like attributes in C#)
• Metadata will convert normal Typescript class to Angular component

Component Code:

• By default root component in Angular named as AppComponent
• Multiple components combined together and create a Module. Every Angular must have at least one module

Decorator:

• The decorator will provide metadata to our class.
• It can contain the properties which tell us how index.html page will use properties of a class. Consider the above example. The decorator has 3 properties. 

• Selector - The value to this property will act as an HTML directive in index.html
• templateUrl - Path of the HTML file whose content to be replaced within the selector directive at runtime
• the template property also can be used if the content to be replaced within the directive is very small. In this case, HTML content will be hardcoded in the template property within backticks (` `)
• The decorator can contain other properties too which is not mentioned in this example. Full list can be seen in Angular website

Angular - Setting Up initial code

 Below commands needs to run in Command Prompt to setting up the initial code

• To set up a code, we need to install Angluar CLI. Follow the below steps.
• Open command prompt and type below command
• [sudo] npm install -g @angular/cli@latest  
• sudo - Use only in Mac
• -g - Global
• Navigate to the path where you want to create your initial code for the project and Open Command Prompt
• Type ng new [Your-Project-Name]
• This will create initial code to work on as shown in below fig 1
• 
  

  

  Fig 1

  
  

Angular - List of software to be Installed

 

Software Installed to Learn Angular:    

Below are the only software required to getting started with Angular 

• Visual Studio Code from here!
• Node JS from here!
• To confirm node is installed, Open Command Prompt and type Node and click enter
• Below text will be seen in console depend on the version you installed

  

  Fig 1

  
  

Few other tools required 

• Angular Framework and Libraries
• Angular CLI 
• Typescript
• Testing Tools

But no need to install all these manually. This can be mentioned in Package.Json (Check later topics) and installed automatically