1) What are the data types available in typescript and explain in detail Explain JavaScript, TypeScript and its advantages (4 Marks) JavaScript is an object-based scripting language which is used to create client-side dynamic pages. The programs in JavaScript language are called scripts. The scripts are written in HTML pages and executed automatically as the page loads. TypeScript is an open-source pure object-oriented programming language. It is a strongly typed superset of JavaScript which compiles to plain JavaScript. It is not directly run on the browser. It needs a compiler to compile and generate in JavaScript file. TypeScript source file is in “.ts” extension. TypeScript is the ES6 version of JavaScript with some additional features. Advantage of TypeScript over JavaScript  TypeScript always highlights errors at compilation time during the time of development, whereas JavaScript points out errors at the runtime.  TypeScript supports strongly typed or static typing, whereas this is not in JavaScript.  TypeScript runs on any browser or JavaScript engine. JavaScript doesn’t support data types, but with the help of TypeScript, we can use the data types feature in JavaScript. We can classify the TypeScript data type as following. 1. Static Types a. Built-in i. Number ii. String iii. Boolean iv. Void v. Null vi. Any vii. Union b. User-defined i. Array ii. Tuple iii. Enum iv. Functions v. Class vi. Interface 2. Generics 3. Decorators Explain some of the above Types with example (8 Marks) 2. Explain implementation of classes and modules in typescript with example Explain TypeScript Class with Example (6 Marks) Classes: In object-oriented programming languages like Java and C#, classes are the fundamental entities used to create reusable components. However, until ECMAScript 6 (also known as ECMAScript 2015), this was not the case with JavaScript. JavaScript has been primarily a functional programming language where inheritance is prototype-based. Functions are used to build reusable components. In ECMAScript 6, object-oriented class-based approach was introduced. TypeScript introduced classes to avail the benefit of object-oriented techniques like encapsulation and abstraction. The class in TypeScript is compiled to plain JavaScript functions by the TypeScript compiler to work across platforms and browsers. A class can include the following:  Constructor  Properties  Methods The following is an example of a class in TypeScript: // Declaration of Class class Employee { empCode: number; empName: string; constructor(code: number, name: string) { this.empName = name; this.empCode = code; } getSalary() : number { return 10000; } } // Create Object let emp = new Employee(100,”Steve”); Explain Modules with Example: (6 Marks) Modules: The TypeScript code we write is in the global scope by default. If we have multiple files in a project, the variables, functions, etc. written in one file are accessible in all the other files. For example, consider the following TypeScript files: file1.ts and file2.ts file1.ts var greeting : string = “Hello World!”; file2.ts console.log(greeting); //Prints Hello World! greeting = “Hello TypeScript”; // allowed The above variable greeting, declared in file1.ts is accessible in file2.ts as well. Not only it is accessible but also it is open to modifications. Anybody can easily override variables declared in the global scope without even knowing they are doing so! This is a dangerous space as it can lead to conflicts/errors in the code. TypeScript provides modules and namespaces in order to prevent the default global scope of the code and also to organize and maintain a large code base. Modules are a way to create a local scope in the file. So, all variables, classes, functions, etc. that are declared in a module are not accessible outside the module. A module can be created using the keyword export and a module can be used in another module using the keyword import. Implementation of Modules in TypeScript: // Employeemodule.ts: (Module 1) export class Employee { empCode: number; empName: string; constructor(name: string, code: number) { this.empName = name; this.empCode = code; } displayEmployee() { console.log (“Employee Code: ” + this.empCode + “, Employee Name: ” + this.empName ); } } let companyName:string = “XYZ”; // Employee1.ts (Module 2) import { Employee } from “./Employeemodule”; let empObj = new Employee(“Rani”, 1); empObj.displayEmployee(); 2) What are the important aspects of angular framework and discuss their contribution? Explain important aspects (6 x 2 Marks) Most important aspects of the Angular framework: 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 using the key terms import and export, with the following syntax: Import {Component} from ‘angular2/core’; Export class App {} 2. Directives 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: a) 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) b) 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) c) 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 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. Ex.: Interpolation, Property Binding, Event Binding, Attribute Binding, Class Binding, Style Binding, Two-way Binding 4. 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 builtin 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. 5. 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. 3) Write in detail about angularCLI with all available commands with their purpose Explain about Angular CLI (2 Marks) 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. Explain Angular CLI Commands: (4 Marks) Angular CLI Command Options Command Alias Purpose ng new [name] Creates a new Angular application ng serve -o Builds and runs the angular application 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 Examples (6 x 1 Marks) Hint: (Give Example to the following) 1. Create Angular Project 2. Run Angular Project 3. Create Custom Component 4. Create Custom Attribute Directive 4. Create Custom Pipe 5. Create Service 4) Explain the procedure to create a new Angular Project and add the Bootstrap Explain about Software required and Installation Process (4 Marks) Angular is a widely used JavaScript framework for front-end development. Angular projects offer a great way to build single-page client applications by implementing HTML and Typescript functionalities. Procedure to Download and Install necessary Software 1. Install Visual Studio 2. Install Node JS from https://nodejs.org a. Check version of Node installed Go to command prompt  Verify Installed Node Version using node -v command b. Check version of NPM Installed Go to command prompt  Verify Installed NPM Version using npm -v command 3. Install Angular CLI Go to command prompt  Install Angular using npm install –g @angular/cli command a. Check Version of Angular Go to command prompt  Verify Installed Angular Version using ng v command Explain about Create of New Angular Project (8 Marks) Once Software is installed and ready, Angular Project will be created using the following procedure: 1. Create Angular Project Go to command prompt  Enter ng new [project name] Example: ng new demo Demo Folder will be created with all necessary folders and files 2. Install Bootstrap and Configure Bootstrap Go to command prompt  Go to Project Folder  Enter npm install bootstrap -save 3. Configure Bootstrap 5 into Angular App And navigate to your project and open angular.json file. And then add the following code into it; as follows: “styles”: [ “node_modules/bootstrap/dist/css/bootstrap.min.css” ], “scripts”: [ “node_modules/bootstrap/dist/js/bootstrap.min.js” ] 4. Open Project in Visual Studio Code Go to command prompt  Go to Project Folder  Enter code . 5. Run Project Go to command prompt  Go to Project Folder  Enter ng serve -o to run in default project in default brower. UNIT-II 1) Explain the concept of using constructor and external templates in angular Explain about Angular Components (6 Marks) Angular Components allow you to control how your application looks and functions through TypeScript code and an HTML template. Component Configuration: An Angular component consists of two main parts: 1. Definition in the decorator section The decorator section is used to configure the component, including things like the selector name and HTML template. Within the @Component decorator are several component configuration options as mentioned below: selector: This option allows you to define the HTML tag name used to add the component to the application via HTML. template: This option allows you to add inline HTML to define the look of the component. This is for when there won’t be very much code to add, and it’s helpful for when you don’t want extra files. templateUrl: This option allows you to import an external template file rather than inline HTML. This is helpful for separating a large amount of HTML code out of a component to help with maintainability. styles: This option allows you to add inline CSS to your component. Use it when only minor style changes are needed. stylesUrls: This option allows you to import an array of external CSS stylesheet(s). You should use this rather than styles when importing external CSS files. 2. Class section, which defines the logic. The class section enables you to give the component its logic, data, and event handlers, as well as export it to be used in other TypeScript files. Example: (6 Marks) 2) Write the process of component creation in angular project Explain Component (6 Marks) Angular is a SPA framework, and a view is made of one or more component. An Angular component represents a portion of a view. Angular Component = HTML Template + Component Class + Component Metadata HTML Template HTML template is nothing but a regular HTML code with additional Angular specific syntax to communicate with the component class. Class Essentially, a component class is a TypeScript class that includes properties and methods. Properties store data and methods include the logic for the component. Eventually, this class will be compiled into JavaScript. Metadata Metadata is some extra data for a component used by Angular API to execute the component, such as the location of HTML and CSS files of the component, selector, providers, etc. Explain the Procedure to Create Component (6 Marks) Generate Angular Component using Angular CLI You can create files for a component manually or using the Angular CLI command. Angular CLI reduces the development time. So, let’s use Angular CLI to create a new component. Use the following CLI command to generate a component. ng generate component Example: ng generate component contact The above command will create a new “contact” folder and app folder and create four files, as shown below. 1) contact.component.css is a CSS file for the component, 2) contact.component.html is an HTML file for the component where we will write HTML for a component, 3) contact.component.spec.ts is a test file where we can write unit tests for a component 4) contact.component.ts is the class file for a component. 3) Explain the concept of angular routing to single page application Explain about SPA (6 Marks) Single Page Applications (SPA) have a unique advantage that the user doesn’t lose context between page transitions. Yester-year applications reload the entire page as the user tries to navigate between views. The flicker not only affects user experience, it is also inefficient. An update to a section of the page needs the whole page to reload. SPAs address this problem. Angular provides Router API to manage a SPA which takes care of the following. 6. Allows a URL to represent a view in the application. 7. Create links that can perform view transitions. In other words, navigate from one view to the other. 8. Allow creating deep-links to specific pages in the application. Without routing and URL tied to a view, the user doesn’t have a way to deep-link to a screen and would need to go through the screens before it, every single time. Users can’t bookmark or save a link on the page. Routing solves this problem. 9. Routing also allows you to define the modular structure of your application. Angular Router Navigate To navigate different routes, use the Angular router as it provides methods to navigate different routes using routerLink. To navigate from one route to another, we need two Angular components. Each component contains a specific view. Explain Routing with Example (6 Marks) Example: Home In the above code, ‘/home’ is the path. Therefore, we need to map a specific component to the path /home. In Angular 13, there is an app-routing.module.ts module file. In that file, you can define the routes array that contains objects. We can define a different path and component in those objects, and angular will map the path to that component accordingly. So, it will render specific components to a particular path. const routes: Routes = [ { path: ‘home’, component: HomeComponent}, { path: ‘dashboard’, component: DashboardComponent } ]; 4) What is data binding. Describe the concept of interpolation and property binding Explain Data Binding (4 Marks) Data binding is the process of linking data from a component with what is displayed in a web page. When data in the component changes, the UI rendered to the user is automatically updated. Types of Data Binding:  Interpolation: Use double curly braces {{Variable}} to get values directly from the Component class.  Property binding: Use this type of binding to set the property of an HTML element.  Event binding: Use this type of binding to handle user inputs.  Attribute binding: This type of binding allows the setting of attributes to an HTML element.  Class binding: You can use this type of binding to set CSS class names to the element.  Style binding: You can use this type of binding to create inline CSS styles for the element.  Two-way binding: You can use this type of binding with data entry forms to receive and display data. Explain Interpolation (4 Marks) String Interpolation: String interpolation in Angular offers one-way Data Binding. It allows the angular template to receive data from the TypeScript template. You can effortlessly show data dynamically in angular HTML template (view). Example: import { Component } from ‘@angular/core’; @Component({ selector: ‘ng-app’, template: ‘

{{ university }}

’ }) export class NgComponent { university: string = ‘Malla Reddy University’; } Explain about Property Binding (4 Marks) In contrast to the attributes, which are defined in HTML, properties belong to the DOM. Since DOM is an object in JavaScript, we can get and set properties. Property binding is used to bind the data from property of a component to DOM elements. It is denoted by []. Example: app.component.ts: export class AppComponent { userName:string = “Peter”; } App.component.html: UNIT-III 1. Define Directives. What are the most common directives used in Angular Definition: (2 Marks) Directives extend the behavior of HTML, enabling you to create custom HTML elements, attributes, and classes with functionality specific to an application. Angular provides many built-in directives, which provide the capability to interact with form elements, bind data in a component to the view, and interact with browser events. Most common Directives using in Angular (10 Marks) Draw Sketch (2 Marks) Using Built-in Directives (2 Marks) Much of the Angular functionality that you need to implement in HTML elements is provided through built-in directives. These directives provide a wide variety of support for Angular applications. The following sections describe most of the Angular directives, which fall into three categories: Component: A directive with a template Directives in Angular is a .js class, which is declared as @directive. We have 3 directives in Angular. A @Component decorator is actually a @Directive decorator extended with templateoriented features. Whenever Angular renders a directive, it changes the DOM according to the instructions given by the directive. Directive appears within an element tag similar to attributes. Structural: A directive that manipulates elements in the DOM (6 Marks) a). *ngIf When this directive is present in an element, that element is added to the DOM if the value returns true. If the value returns false, then that element is removed from the DOM, preventing that element from using resources. Here is an example: