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 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:

….. </div b). ngFor This directive is used to create a copy of a template for each item within an iterable object

Name: {{}}

c). ngSwitch This directive displays a template based on the value passed in it. As with ngIf, if the value does not match the case, the element is not created.

Hello Mohan Hello Vijay Hello Student

Attribute: A directive that manipulates the appearance and behavior of a DOM element (2 Marks) a). ngStyle This directive updates the styles of an HTML element. Example: app.component.html:


app.component.ts: country:any= ‘UK’; Output Country will be shown in yellow Color b). ngClass It controls the appearance of elements by adding and removing CSS classes dynamically Example: app.component.html:


app.component.ts: country:any= ‘UK’; output: UK will be printed 2. Create an angular project to implement attribute directives Create Angular Project (6 Marks) Write Answer same as Unit 1 – Question 5 Implement Attribute Directive (6 Marks) Write Answer same as Unit 3 – Question 1 (see above) 3. Explain the following Structural Directives with an Example a. *ngIf b. *ngFor c. ngSwitch Theory: Write Answers same as Unit 3 – Question 5 (3 x 2 Marks) Examples: See Slides 8-13 of PPT (Unit 3) (3 x 2 Marks) 4. Explain the following Attribute Directives with an Example a). *ngClass b). *ngStyle Theory: Write Answers same as Unit 3 – Question 5 (2 x 3 Marks) Examples: See Slides 15 & 16 of PPT (Unit 3) (2 x 3 Marks) 5. How to build a Custom directive. Explain with an example? Custom Directive (4 Marks) Example (8 Marks) See Slides 17 & 18 of PPT (Unit 3) UNIT-IV 1). What are Built-in Browser Events available in Angular with example About Browser Events (2 Marks) List of Browser Events (4 Marks) Example (6 Marks) See Slides 3-6 of PPT (Unit 4) 2). Explain the following Built-in Pipes with Example a. Currency b. Number c. Date List of Built-In Pipes (3 Marks) Examples for Currency, Number and Date (3 x 3 Marks) See Slides 16-20 of PPT (Unit 4) 3). Write about the creation of an angular project to collect the data through Login Form using Template-Driven Forms Creation of Angular Project (4 Marks) Write Answer same as Unit 1 – Question 5 Template-Driven Form (8 Marks) See Slides 24-27 of PPT (Unit 4) 4). What is Dependency Injection in angular. How to create a service in angular Dependency Injection (6 Marks) Angular uses the Dependency Injection design pattern, which makes it extremely efficient. This programming paradigm allows classes, components, and modules to be interdependent while maintaining consistency. This reduces the frequency with which the class changes. Known to be a programming paradigm, dependency injection is what makes a class independent of its dependencies. Dependency injection enables the creation of dependent objects outside of a class while providing those very objects to a class in numerous ways. See Slides 31-33 of PPT (Unit 4) Create Service (6 Marks) See Slides 34-40 of PPT (Unit 4) 5). Explain briefly about HTTP Services with an example Explanation (6 Marks) Angular services are objects that get instantiated just once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e., data is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application. They are usually implemented through dependency injection. Features of Angular Services  Services in Angular are simply typescript classes with the @injectible decorator. This decorator tells angular that the class is a service and can be injected into components that need that service. They can also inject other services as dependencies.  As mentioned earlier, these services are used to share a single piece of code across multiple components. These services are used to hold business logic.  Services are used to interact with the backend. For example, if you wish to make AJAX calls, you can have the methods to those calls in the service and use it as a dependency in files.  In angular, the components are singletons, meaning that only one instance of a service that gets created, and the same instance is used by every building block in the application.  A service can be registered as a part of the module, or as a part of the component. To register it as a part of the component, you’ll have to specify it in the providers’ array of the module. 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 Example (6 Marks) See Slides 34-40 of PPT (Unit 4) UNIT-V 1). What is the difference between MongoDB and MySQL? About Databases: (2 Marks) Good web applications must store and retrieve data with accuracy, speed, and reliability. Therefore, the data storage mechanism you choose must perform at a level that satisfies user demand. Several different data storage solutions are available to store and retrieve data needed by your web applications. The three most common are direct file system storage in  Files – .txt, .csv, .xml, .json, etc.,  Relational databases – MySQL, MS SQL, Postgres, Oracle, etc.,  NoSQL databases – MongoDB, Cassandra (Facebook), Redis, Apache HBase (Google), Neo4J, Elasticsearch, Amazon DynamoDB Explain MongoDB (3 Marks) The concept of NoSQL (Not Only SQL) consists of technologies that provide storage and retrieval without the tightly constrained models of traditional SQL relational databases. The motivation behind NoSQL is mainly  simplified designs,  horizontal scaling, and  finer control of the availability of data. MongoDB is a NoSQL database based on a document model where data objects are stored as separate documents inside a collection. The motivation of the MongoDB language is to implement a data store that provides high performance, high availability, and automatic scaling. See Slides 5-7 of Unit 5 Explain MySQL (3 Marks) MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses. MySQL is becoming so popular because of many good reasons −  MySQL is released under an open-source license. So, you have nothing to pay to use it.  MySQL uses a standard form of the well-known SQL data language.  MySQL works very quickly and works well even with large data sets.  MySQL is very friendly to PHP, the most appreciated language for web development.  MySQL supports large databases, up to 50 million rows or more in a table. The default file size limit for a table is 4GB, but you can increase this (if your operating system can handle it) to a theoretical limit of 8 million terabytes (TB). MySQL vs MongoDB (4 Marks) See Slide 22 of Unit 5 for differences between MySQL and MongoDB 2) Explain various data types in MongoDB List Data Types (4 Marks) See slides 9-10 of Unit 5 Examples (8 Marks) 3) How can you create and delete collections in MongoDB database Create & Delete Collections (6+6 Marks) s See slides 25-26 of Unit 5 4) What are the Database update operators available in MongoDB List update Operators (4 Marks) Explain with Examples (8 Marks) See slides 31-32 of Unit 5 5) Explain in detail about finding, adding and deleting of a document in a collection Find Documents (6 Marks) Add Document (3 Marks) Delete Documents (3 Marks

Powered by WordPress