Unit 1 - TypeScript & Introduction to Angular CLI.pptx

TYPE SCRIPT &
INTRODUCTION TO ANGULAR CLI
(UNIT 1)
Dr. P. Rambabu, M. Tech., Ph.D., F.I.E.
23-Mar-2022

Unit 1: TypeScript & Installation of Angular
CLI
TypeScript:
Node/ NPM Installation,
Different Types (TypeScript Types)
Understanding Interfaces, Implementing Classes, Implementing Modules,
Understanding Functions
Introduction to Angular:
Why Angular, Introduction of Angular, Separation of Responsibilities,
Adding Angular to your Environment,
using Angular CLI, Creating a basic Angular Application.

Introduction to MEAN Stack
Development
MEAN Stack is one of the most popular Technology Stack. It is used to develop a Full Stack
Web Application. Although it is a Stack of different technologies, all of these are based on
JavaScript language.
MEAN Stands for:
1. M – MongoDB
2. E – Express JS
3. A – Angular JS
4. N – Node JS
 This stack leads to faster development as well as the deployment of the Web Application.
 Angular is Frontend Development Framework whereas Node.js, Express, and MongoDB are
used for Backend development

1. Node.js: Node.js is used to write the Server Side Code in Javascript. One of the
most important points is that it runs the JavaScript code outside the Browser. It is
cross-platform and Open Source.
Pre-requisites to learn Node.js- JavaScript/TypeScript
2. AngularJS: Angular is a Front-end Open Source Framework developed by
Google Team. Angular projects are simple to create using Angular CLI (Command
Line Interface) tool developed by the Angular team.
Pre-requisites to learn Angular:
• TypeScript
• CSS Preprocessor
• Template Code (Angular Material, HTML 5, etc)

3. MongoDB: MongoDB is a NoSQL Database. It has JSON like documents. It is
document oriented database.
Pre-requisites to learn MongoDB:
• What is Database
• Disadvantages of SQL Database
4. ExpressJS: Express is a web Framework build on Node.js and used to make API
and to build Web Applications.
Pre-requisites to learn Express:
• JavaScript/ TypeScript
• Node.js

JavaScript
JavaScript is the most popular programming language. It is lightweight and
commonly used to create interactive and dynamic web pages. It is developed by
Netscape in 1995 and named as LiveScript which is later renamed to JavaScript.
JavaScript was introduced as a language for the client side. The development of
Node.js has marked JavaScript as an emerging server-side technology too.
However, as JavaScript code grows, it tends to get messier, making it difficult to
maintain and reuse the code. Moreover, its failure to embrace the features of Object
Orientation, strong type checking and compile-time error checks prevents
JavaScript from succeeding at the enterprise level as a full-fledged server-side
technology. s
TypeScript was presented to bridge this gap.
TypeScript is a strongly typed, object oriented, compiled language.

TypeScript
TypeScript is a superset of JavaScript which primarily provides optional static typing,
classes and interfaces. One of the big benefits is to enable IDEs to provide a richer
environment for spotting common errors as you type the code.
• TypeScript doesn’t run in the browser. The code written in typescript is compiled
to JavaScript, which then runs in the browser.
• TypeScript supports Object Oriented Programming concepts like classes,
object, interfaces and inheritance etc. like C# or Java
• TypeScript is open source.
It was designed by Anders Hejlsberg (the lead architect of C#) at Microsoft.

The TypeScript Compiler
The TypeScript compiler is itself a .ts file compiled down to JavaScript (.js) file. The
TSC (TypeScript Compiler) is a source-to-source.
The TSC generates a JavaScript version of the .ts file passed to it. In other words,
the TSC produces an equivalent JavaScript source code from the Typescript file
given as an input to it. This process is termed as transpilation.
Node.js is an open source, cross-platform runtime environment for server-side
JavaScript. Node.js is required to run JavaScript without a browser support. It uses
Google V8 JavaScript engine to execute code.
Use tsc –watch app.ts command for auto-compilation when app.ts file saved

Example:
TypeScript:
var message:string = "Hello World"
console.log(message)
On compiling, it will generate following JavaScript code.
JavaScript:
//Generated by typescript 1.8.10
var message = "Hello World";
console.log(message);
Integrated Development Environment (IDE)
Typescript can be built on development environments like Visual Studio, Sublime
Text 2, WebStorm/ PHPStorm, Eclipse, Brackets, etc.

Introduction to Style Sheet (CSS)
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within
the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within
the body will also get the same color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a “cyan" background color:

External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension. Here is what the "styles.css" file
looks like:

Overview of JavaScript
1. Defining Variables:
2. Data Types: String, Number, Boolean, Array, Object, Null
3. Operators
a) Arithmetic: +, -, ++, --, *, /, %
b) Assignment: =, +=, -=, *=, /=, %=
c) Comparison:==, ===, !=, !==, >, >=, <, <=,
d) Chain Comparison: &&, ||, !
4. If Statements: if, if.. else, if.. else if.. else,
5. Switch Statements
6. Loop Statements: while loops, do/while, for loop, for/in loop, interrupting loop
7. Functions: Defining function, Passing variable to function, returning values from function
8. Understanding Variable Scope
9. Objects
a) Built-in: Number, Array, String, Date and Math
b) Custom Defined Object
10. String Manipulation: Combine, Split, Replace, etc.,
11. Arrays: Combining Array, Iterating through Array, Converting Array to String, Add/ Remove items
12. Error Handling: try.. catch, try.. catch.. finally

Overview of TypeScript
1. Defining Variables:
2. Data Types: String, Number, Boolean, Array, Null, Any, Void, Enum
3. Operators
a) Arithmetic: +, -, ++, --, *, /, %
b) Assignment: =, +=, -=, *=, /=, %=
c) Comparison:==, ===, !=, !==, >, >=, <, <=,
d) Chain Comparison: &&, ||, !
4. If Statements: if, if.. else, if.. else if.. else,
5. Switch Statements
6. Loop Statements: while loops, do/while, for loop, for/in loop, interrupting loop
7. Interfaces:
8. Classes:
a) Implementing Classes
b) Class Inheritance
9. Modules:
10. Functions:
11. Understanding Variable Scope
12. Objects
a) Built-in: Number, Array, String, Date and Math
b) Custom Defined Object
13. String Manipulation: Combine, Split, Replace, etc.,
14. Arrays: Combining Array, Iterating through Array, Converting Array to String, Add/ Remove items
15. Error Handling: try.. catch, try.. catch.. finally

Overview of TypeScript
JavaScript doesn't support data types, but with the help of TypeScript, we can use the data types feature in
JavaScript. The Type System checks the validity of the given values before the program uses them. It ensures that the
code behaves as expected.
TypeScript provides data types as an optional Type System. We can classify the TypeScript data type as following.

1. Static Types
In the context of type systems, static types mean "at compile time" or "without running a program." In a statically
typed language, variables, parameters, and objects have types that the compiler knows at compile time. The
compiler used this information to perform the type checking.
Static types can be further divided into two sub-categories:
1. Built-in or Primitive Type
2. User-Defined Data Type

2. Generic Types
Generic is used to create a component which can work with a variety of data type rather than a single one. It
allows a way to create reusable components. It ensures that the program is flexible as well as scalable in the
long term. TypeScript uses generics with the type variable <T> that denotes types. The type of generic functions
is just like non-generic functions, with the type parameters listed first, similarly to function declarations.

3. Decorators
A decorator is a special of data type which can be attached to a class declaration, method, property, accessor, and
parameter. It provides a way to add both annotations and a meta-programing syntax for classes and functions. It
is used with "@" symbol.

Variable Declaration
String:
This data type stores character data as a string. The character data is specified
by either single or double quotation marks. All the data contained in the quotes
will be assigned to the string variable. Consider these examples:
var branch: string = ’Computer Science Engineering’;
Number:
This data type stores data as a numeric value. Numbers are useful in counting,
calculations, and comparisons. Here are some examples:
var noOfStudents: number = 90;

Boolean:
This data type stores a single bit that is either true or false.
Booleans are often used for flags. For example, you might set a variable to false at
the beginning of some code and then check it on completion to see if the code
execution hit a certain spot. The following examples define true and false variables:
var validEmail: boolean = true;
var validMobileNo: boolean = false;
Array:
An indexed array is a series of separate distinct data items, all stored under a single
variable name. Items in the array can be accessed by their zero-based index, using
array[index]. The following are two examples of creating a simple array and then
accessing the first element, which is at index 0:
var months:string[] = [“jan", “feb", “march"];
var firstInMonths = months[0];

Null:
Sometimes you do not have a value to store in a variable, either because it hasn’t
been created or you are no longer using it. At such a time, you can set a variable to
null. Using null is better than assigning a value of 0 or an empty string ("") because
those may be valid values for the variable. By assigning null to a variable, you can
assign no value and check against null inside your code, like this:
var newVar = null;
Any:
In TypeScript you may not always know what type of variable you will be getting or
using. In such a case, you can assign the variable type as any to allow any other
type to be assigned to a variable. The following is an example of assigning multiple
types to the same variable:
var anyType: any = "String Assigned";
anyType = 404;
anyType = true;

Void:
Use void when you don’t want a variable to have any type at all. In TypeScript, using
void prohibits you from assigning or returning a value. In most cases you use void
when declaring a function you don’t want to have a return value.
function DisplayMessage(): void {
document.write("code goes here");
}
Enum:
TypeScript lets us use enum, which allows you to give names to enumerated values.
The following is the syntax to declare enum:
enum People {
Bob, John, Alex
}
to reference the values in enum, you use this syntax:
var x = People.Bob or var y = People[0]

Understanding Interfaces
Interfaces are a fundamental part of TypeScript. They allow you to have a set
structure for an application. They are powerful tools that allow you to set structures
for objects, functions, arrays, and classes. To define an interface in TypeScript,
you use the keyword interface followed by the structure you want your objects to
follow, like this:
interface Person {
rollNumber: string;
name: string;
age: number;
}
You can also add optional items to interfaces to allow some flexibility within a
program using attribute ?
interface Person {
rollNumber: string;
name: string;
age: number;
backlogs?: Boolean;

Implementing Classes
To define a class in TypeScript, you use the syntax class ClassName { code goes
here }.
The following example defines a simple class that defines a Person object with a
feed function:
class Student {
rollNumber: string;
name: string;
age: number;
backlogs?: Boolean;
constructor(rollNumber: string) {
this.rollNumber = rollNumber;
}
GetStudentName(): string {
return this.name;
}
}

Understanding Functions
Functions in TypeScript are similar to functions in JavaScript, but they have added capabilities. TypeScript functions
enable you to give types to the parameters and even to what will be returned by a function.
function sum (x: number, y: number): number {
return x + ' ' + y;
}
TypeScript function with optional parameters.
function SayHello (name: string, college?: string){
return "Welcome " + name + " to college."
}
TypeScript function with default parameter. A default parameter is optional, but if it isn’t given, it has a default value
instead of nothing.
function SayHello (name: string, branch = “CSE"){
return "hello " + name + “. Welcome to" + branch + " branch.";
}

Angular is a perfect client-side framework for most web applications because it
provides a very clean and structured approach. With a clean, structured front end, you
will find that it is much easier to implement clean, well-structured server-side logic.
Why Angular?
JavaScript is a powerful programming language that allows developers to use a web
browser as a full application platform. Angular provides a great framework that makes
it faster and easier to create client-side JavaScript applications. Developers use
Angular because it provides a lot of the structure of web applications - such as data
binding, dependency injection, and HTTP communications that teams would otherwise
need to develop themselves.
Understanding Angular
Angular is a JavaScript framework, which means it provides a number of APIs and
structure that helps you quickly and easily create complex client-side code. Angular
does a great job at providing not only features but also a basic framework and
programming model to create client applications.

Separation of Responsibilities
An extremely important part of designing Angular applications is the separation of
responsibilities. The whole reason you choose a structured framework is to ensure that
code is well implemented, easy to follow, maintainable, and testable.
The following are a few rules to follow when implementing Angular:
• The view acts as the official presentation structure for the application. Indicate any
presentation logic as directives in the HTML template of the view.
(app.component.html)
• If you need to perform any DOM manipulation, do it in a built-in or custom directive
JavaScript code and nowhere else. (app.component.ts)
• Implement any reusable tasks as services and add them to your modules by using
dependency injection. (Services)
• Ensure that the metadata reflects the current state of the model and is the single
source for data consumed by the view.
• Define controllers within the module namespace and not globally to ensure that your
application can be packaged easily and avoid overwhelming the global namespace.

Adding Angular to Your Environment
To get started with Angular, you need to set up a few things first to get it ready to use.
Here’s what you need:
• Angular libraries to make Angular applications (ng new [project name])
• A web server to serve the files to the browser (ng serve –o)
• A transpiler to convert your TypeScript code back to JavaScript (tsc test.ts)
• A watcher so that the transpiler knows when there has been a file change (tsc –
watch test.ts)
• An editor in which to write your code (Visual Studio Code)
Note
Visual Studio Code (https://code.visualstudio.com/) is recommended IDE as it has
good TypeScript and Angular support built in, and is a lightweight editor with many
available extensions.

Using the Angular CLI
Angular provides a powerful CLI that makes building out Angular applications a much
more streamlined process. By using the CLI, you will quickly be able to generate new
Angular applications, components, directives, pipes, and services. The following
sections go over some of the most important tools available through the CLI.
Angular CLI Command Options
Command Alias Purpose
ng new [name] Creates a new Angular application
ng serve [name] Builds and runs the angular application for testing
ng generate component [name] ng g c [name] Creates a new component
ng generate directive [name] ng g d [name] Creates a new directive
ng generate module[name] ng g m [name] Creates a module
ng generate pipe[name] ng g p [name] Creates a pipe
ng generate service[name] ng g s [name] Creates a service
ng generate enum [name] ng g e [name] Creates an enumeration
ng generate interface [name] ng g i [name] Creates an Interface

Creating a Basic Angular Application
Step 1: Create a directory where you can place your projects.
Step 2: Generate your first Angular application. Run the following command to create
the application:
example: ng new first
Step 3: Run Application. Run the following command to launch a server that will
render the application:
ng serve –o
How it works?
Index.html  app.module.ts  app.component.ts  app.component.html

Most important aspects of the Angular framework:
1. Modules
2. Directives
3. Data Binding
4. Dependency Injection
5. Services
6. Routing
1. Modules:
In general, Angular apps use a modular design. Modules are highly recommended
because they allow you to separate your code into separate files. This helps you keep
your code files short and manageable while still allowing you to access the
functionality from each one. Unlike how you use modules with TypeScript, with
Angular you import external modules at the top of a file and export the functionality
you need at the bottom. You do this by using the key terms import and export, with the
following syntax: Import {Component} from 'angular2/core'; Export class App{}
Unit
2
Unit
3

2. Directives (Model  View)
Directives are JavaScript classes with metadata that defines the structure and
behavior. Directives provide the majority of UI functionality for Angular applications.
There are three major types of directives:
• Components:
A component directive is a directive that incorporates an HTML template with
JavaScript functionality to create a self-contained UI element that can be added to an
Angular application as a custom HTML element. Components are likely to be the
directives you use the most in Angular. (@Component in app.component.ts)
• Structural:
You use structural directives when you need to manipulate the DOM. Structural
directives allow you to create and destroy elements and components from a view.
(*ngIf, *ngFor, *ngSwitch in app.component.html)
• Attribute:
An attribute directive changes the appearance and behavior of HTML elements by
using HTML attributes. (ngClass, ngStyle in app.component.html)

3. Data Binding (Model-View: One way & Two way)
One of the best features of Angular is the built-in data binding - the process of linking
data from a component with what is displayed in a web page. Angular provides a very
clean interface to link model data to elements in a web page.
When data is changed on a web page, the model is updated, and when data is
changed in the model, the web page is automatically updated. This way, the model is
always the only source for data represented to the user, and the view is just a
projection of the model.
4. Dependency Injection
Dependency injection is a process in which a component defines dependencies on
other components. When the code is initialized, the dependent component is made
available for access within the component. Angular applications make heavy use of
dependency injection.
A common use for dependency injection is consuming services. For example, if you
are defining a component that requires access to a web server via HTTP requests,

5. Services
Services are the major workhorses in the Angular environment. Services are
singleton classes that provide functionality for a web app. For example, a common
task of web applications is to perform AJAX requests to a web server. Angular
provides an HTTP service that houses all the functionality to access a web server.
The service functionality is completely independent of context or state, so it can be
easily consumed from the components of an application. Angular provides a lot of
built-in service components for basic uses, such as HTTP requests, logging, parsing,
and animation. You can also create your own services and reuse them throughout
your code.
6. Routing
Routing in Angular allows the users to create a Single-Page Application (SPA) with
multiple views and allows navigation between them. Users can switch between these
views without losing the application state and properties.

Dr. Rambabu Palaka
Professor
School of Engineering
Malla Reddy University, Hyderabad
Mobile: +91-9652665840
Email: drrambabu@mallareddyuniversity.ac.in
Reference:
Node.js, MongoDB and Angular Web Development
by Brad Dayley, Brenden Dayley, Caleb Daley

Unit 1 - TypeScript & Introduction to Angular CLI.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Unit 1 - TypeScript & Introduction to Angular CLI.pptx

Ähnlich wie Unit 1 - TypeScript & Introduction to Angular CLI.pptx (20)

Mehr von Malla Reddy University

Mehr von Malla Reddy University (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Unit 1 - TypeScript & Introduction to Angular CLI.pptx