Trainer Name: Prajakta Markale
Technology: Angular 4.0
Angular history:
Angular JS was introduced in 2010
Angular 2 was introduced in 2016
Angular 4,5,6,7 were various versions introduced in late 2016.
Angular 8 was inMay 2019
Angular 9 in Feb 2020
Angular 10 in Jun 2020
Types of App:
Console
Desktop
Web
Web based App.
2 types
MPA -Multiple Page Appli
SPA - Sinlge Page Appli
SPA-Single Page Application
Entire web appln is integrated in to a single page
What is Angular??
---------------
Angular is a clientside framework used to develop webapp[SPA]
using HTML & TypeScript
HTML-Hypertext Markup Language
HTML is a web designing language
command--->tag---> <..>
eg:-<p>,<ol>,<ul>,<h1>,<table>,<marquee>
HTML defines content of webpage [what you see]
CSS defines the style [How you see]
setup
s/w requirements
1)Visual Studio Code [Editor]
https://code.visualstudio.com
version
2)Node.js [Execution engine for ANgular application]
https://nodejs.org
version 12.18.1
3)install typescript
open node terminal
open C:\Users\<UserName>
npm install -g typescript
what is npm??
------------
npm stands for node package manager
node utility for installing s/w from net
_______________________________________
steps:-
open VS Code Editor--->open folder ---->type Typescript
code[file.ts]--->compile & execute
tsc *.ts
here typescript code will be compiled to js code by typescrpt compiler
node *.js
here javascript code will be executed by the node
TypeScript
-----------
-Typescript is a open source prog lang developed by Microsoft
-parent lang/super set of JavaScript
-strongly typed
[we have to specify the datatype for a variable]
in C, int i;
eg:-let x:number=10; // number,string,any,boolean
let msg:string="hello"; ///// small s in string especially for JAVA
students
JavaScript is not strongly typed. in JS-----var a; a=10; a="ABC" ; a=new
Date();
-object-oriented language [JS-->object-based]
- absstraction, Encapsulation, Inheritance and Polymorphism
-compiled language[JS------->interpreted lang]
Typescript gets compiled to Javascript
Hello.ts[typescript code]
tsc Hello.ts [tsc stands for typescript compiler]
node Hello.js
***
AngularJS is first version --uses HTML+Javascript
Angular ---->uses HTML+Typescript
**Declaring a variable in TS
-----------------------------
let variable:datatype=value
eg:-
let rollno:number=10;
let msg:string="Hello";
let status:boolean=false;
let num1:number=10,num2:number=20;
let result:any; just like var result;
***COnditional statement using if-else
------------------------------------
if(expr){
code1
}
else{
code2
}
various combinations
--------------------
simple if-else
nested if-else
else-if ladder (there is no Switchcase loop in typescript)
LAB)
1)cp,sp print profit or loss
2)weight,age print [else-if ladder & logical operators]
health status--->overweight,underweight,normal
3)print the rate of interest
nested if-else,relational operators]
senior citizen male--->11%
senior citizen female --->12%
non-senior citizen --->10%
_________________________________________________
