Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
Just a simple intro to typescript.
Most of the contents are of any OO language, hence slide contents are minimal. If anyone need any further help, reach me out - akhil2369492@gmail.com
-Akhil
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.
Microsoft Typescript is a statically typed compiled language to clean and a simple plain old JavaScript code which runs on any browser, in Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).
https://youtu.be/_yLt_abcK2w
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
Angular 7 is a Javascript framework built around the concept of components, and more precisely, with the Web Components standard in mind. It was rewritten from scratch by the Angular team using Typescript (although we can use it with ES5, ES6, or Dart as well).
Angular 7 is a big change for us compared to 1.x. Because it is a completely different framework than 1.x, and is not backward-compatible. Angular 7 is written entirely in Typescript and meets the ECMAScript 6 specification
angular interview questions and answers, angular 7 interview questions and answers, angular interview question, angular interview questions and answers for experienced, angular 7 interview questions, angular 6 interview questions,
angular interview questions, angular 6 interview questions and answers, angular 2 interview questions, angular7, angular 5 interview questions, angular interview, angular 2 interview questions and answers, angular questions and answers
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
Just a simple intro to typescript.
Most of the contents are of any OO language, hence slide contents are minimal. If anyone need any further help, reach me out - akhil2369492@gmail.com
-Akhil
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.
Microsoft Typescript is a statically typed compiled language to clean and a simple plain old JavaScript code which runs on any browser, in Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).
https://youtu.be/_yLt_abcK2w
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
Angular 7 is a Javascript framework built around the concept of components, and more precisely, with the Web Components standard in mind. It was rewritten from scratch by the Angular team using Typescript (although we can use it with ES5, ES6, or Dart as well).
Angular 7 is a big change for us compared to 1.x. Because it is a completely different framework than 1.x, and is not backward-compatible. Angular 7 is written entirely in Typescript and meets the ECMAScript 6 specification
angular interview questions and answers, angular 7 interview questions and answers, angular interview question, angular interview questions and answers for experienced, angular 7 interview questions, angular 6 interview questions,
angular interview questions, angular 6 interview questions and answers, angular 2 interview questions, angular7, angular 5 interview questions, angular interview, angular 2 interview questions and answers, angular questions and answers
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Moving From JavaScript to TypeScript: Things Developers Should KnowFibonalabs
Moving from javascript to typescript is not that tedious if you follow the proper steps since every JS code is a valid typescript code. You can choose to convert the files where you require strict typing and keep the other files without a change.
An introduction to Typescript for programmers who use JavaScript.
It goes through what it is, what's it useful for, how to start using it and some things I've observed while using it.
Notes are not available but feel free to PM me if you have any question.
Reasons to Use Typescript for Your Next Project Over Javascript.pdfMobMaxime
Do you know that TypeScript is considered a better programming language than JavaScript? Yes, it's true. Wondering Why? We’ll discuss this in complete detail today.
Unit - 1: ASP.NET Basic
~~~~~~~~~~~~~~~~~~~~
Introduction to ASP.NET: .NET Framework (CLR, CLI, BCL), ASP.NET Basics, ASP.NET Page Structure, Page Life Cycle.
Controls: HTML Server Controls, Web Server Controls, Web User Controls, Validation Controls, Custom Web Controls.
What is JavaScript?
Interpreted programming or scripting language from Netscape.
Easier to code than the compiled languages like C and C++.
Lightweight and most commonly used script in web pages.
Allow client-side user to interact and create dynamic pages.
Cross-platform and object-oriented scripting language.
Most popular programming language in the world.
High level, dynamic and untyped programming language.
Standardized in the ECMAScript language specification.
Used for shorter programs
Takes longer time to process than compiled languages.
Similar to Unit 1 - TypeScript & Introduction to Angular CLI.pptx (20)
Introduction to Data Science, Prerequisites (tidyverse), Import Data (readr), Data Tyding (tidyr),
pivot_longer(), pivot_wider(), separate(), unite(), Data Transformation (dplyr - Grammar of Manipulation): arrange(), filter(),
select(), mutate(), summarise()m
Data Visualization (ggplot - Grammar of Graphics): Column Chart, Stacked Column Graph, Bar Graph, Line Graph, Dual Axis Chart, Area Chart, Pie Chart, Heat Map, Scatter Chart, Bubble Chart
Overview and about R, R Studio Installation, Fundamentals of R Programming: Data Structures and Data Types, Operators, Control Statements, Loop Statements, Functions,
Descriptive Analysis using R: Maximum, Minimum, Range, Mean, Median and Mode, Variance, Standard Deviation, Quantiles, IQR, Summary
Introduction to Statistics -
Sampling Techniques, Types of Statistics, Descriptive Statistics,
Inferential Statistics,
Variables and Types of Data: Qualitative, Quantitative, Discrete,
Continuous, Organizing and Graphing Data: Qualitative Data, Quantitative Data
1. Angular Components:
Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA)
2. Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.
Topics:
1. Introduction to GIS
2. Components of GIS
3. Types of Data
4. Spatial Data
5. Non-Spatial Data
6. GIS Operations
7. Coordinate Systems
8. Datum
9. Map Projections
10. Raster Data Compression Techniques
11. GIS Software
12. Free GIS Data Resources
Topics:
1. Mapping Concepts
2. Analysis with paper based Maps
3. Limitations of Paper based Maps
4. Computer Aided Cartography History and Development
5. GIS Definition
6. Advantage of Digital Maps
Topics:
1. Introduction to Fluid Dynamics
2. Surface and Body Forces
3. Equations of Motion
- Reynold’s Equation
- Navier-Stokes Equation
- Euler’s Equation
- Bernoulli’s Equation
- Bernoulli’s Equation for Real Fluid
4. Applications of Bernoulli’s Equation
5. The Momentum Equation
6. Application of Momentum Equations
- Force exerted by flowing fluid on pipe bend
- Force exerted by the nozzle on the water
7. Measurement of Flow Rate
a). Venturimeter
b). Orifice Meter
c). Pitot Tube
8. Measurement of Flow Rate in Open Channels
a) Notches
b) Weirs
1. Introduction to Kinematics
2. Methods of Describing Fluid Motion
a). Lagrangian Method
b). Eulerian Method
3. Flow Patterns
- Stream Line
- Path Line
- Streak Line
- Streak Tube
4. Classification of Fluid Flow
a). Steady and Unsteady Flow
b). Uniform and Non-Uniform Flow
c). Laminar and Turbulent Flow
d). Rotational and Irrotational Flow
e). Compressible and Incompressible Flow
f). Ideal and Real Flow
g). One, Two and Three Dimensional Flow
5. Rate of Flow (Discharge) and Continuity Equation
6. Continuity Equation in Three Dimensions
7. Velocity and Acceleration
8. Stream and Velocity Potential Functions
E-Waste or Electronic Waste may be defined as discarded computers, office electronic equipment, entertainment device electronics, mobile phones, television sets and refrigerators. This definition includes used electronics which are destined for reuse, resale, salvage, recycling, or disposal.
Biomedical Waste is any kind of waste that contains infectious material (or material that’s potentially infectious). This definition includes waste generated by healthcare facilities like physician’s offices, hospitals, dental practices, laboratories, medical research facilities, and veterinary clinics
This is a presentation by Dada Robert in a Your Skill Boost masterclass organised by the Excellence Foundation for South Sudan (EFSS) on Saturday, the 25th and Sunday, the 26th of May 2024.
He discussed the concept of quality improvement, emphasizing its applicability to various aspects of life, including personal, project, and program improvements. He defined quality as doing the right thing at the right time in the right way to achieve the best possible results and discussed the concept of the "gap" between what we know and what we do, and how this gap represents the areas we need to improve. He explained the scientific approach to quality improvement, which involves systematic performance analysis, testing and learning, and implementing change ideas. He also highlighted the importance of client focus and a team approach to quality improvement.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
The Indian economy is classified into different sectors to simplify the analysis and understanding of economic activities. For Class 10, it's essential to grasp the sectors of the Indian economy, understand their characteristics, and recognize their importance. This guide will provide detailed notes on the Sectors of the Indian Economy Class 10, using specific long-tail keywords to enhance comprehension.
For more information, visit-www.vavaclasses.com
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
2. 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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13. 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
14.
15.
16. 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)
17. 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
18. 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.
19. 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.
20.
21.
22. 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
23. 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.
24. 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.
25. 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:
26. 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:
27. 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:
28.
29. 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
30. 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
31. 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.
32. 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
33. 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.
34. 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.
35. 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;
36. 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];
37. 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;
38. 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]
39. 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;
40. 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;
}
}
41. 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.";
}
42.
43. 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.
44. 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.
45. 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.
46. 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
47. 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
51. 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
52. 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)
53. 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,
54. 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.
55. 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