MVC Life-Cycle , wwwroot

1. What is MVC and it's cycle?

MVC application life cycle has two main phases first creating the request object and second sending our response to the browser.

1. Creating Response Object:

The request object creation has major four steps as below:.

1. Fill route:- MVC requests are mapped to route tables which in turn specify which controller and action to be invoked. So if the request is the first request the first thing is to fill the route table with routes collection. This filling of route table happens in the global.asax file.
2. Fetch route:- Depending on the URL sent "UrlRoutingModule" searches the route table to create "RouteData" object which has the details of which controller and action to invoke.
3. Request context created:- The "RouteData" object is used to create the "RequestContext" object.
4. Controller instance created:- This request object is sent to "MvcHandler" instance to create the controller class instance. Once the controller class object is created it calls the "Execute" method of the controller class.

2. Creating Response object:

This phase has two steps executing the action and finally sending the response as a result to the view.

1. Execute Action:- The "ControllerActionInvoker" determines which action to executed and executes the action.
2. Result sent:- The action method executes and creates the type of result which can be a view result , file result , JSON result etc.

So in all there are six broad steps which get executed in MVC application life cycle.

2. What is Appsettings.json ?

appsettings.json is one of the several ways, in which we can provide the configuration values to ASP.NET core application. You will find this file in the root folder of our project.

 

We can also create environment-specific files like appsettings.customer.json, appsettngs.production.json, etc.

3. What is the importance of wwwroot ?

Having a wwwroot folder keeps a clean separation between code files and static files. It brings clarity to the items that will be sent to the server and the items that should remain on the dev machine.

Read More

PART-5 INTERVIEW TYPE QUESTIONS

1. What are three different types of directives and explain them with example?

Three three types of directives in Angular and these are :

Structural Directive: Structural directives enable Angular developers to add, edit and remove elements in the DOM.

Attribute Directive: Attribute directive enable Angular developers to define an attribute that when added to an element change the appearance of the element.

Component Directive: This enables you to define directives that contain templates using a rich HTML-like Syntax.

2. What is Refactoring?

Refactoring is the technique for restructuring an existing body of code, altering its internal structure without changing its external behavior.

3. Explain ng generate?

ng generate takes the name of the project, as specified in the projects section of the angular.json workspace configuration file. When a project name is not supplied, it will execute for all projects.

4. What is Dependency injection?

Dependency injection makes testing easier . The injection can be done through constructor.

5. How to navigate from within the component code?

The navigate from within the component code is done by following syntax:

        this.router.navigate(['/admin]);

6. What is a constructor in a class?

A constructor in Java is a special method that is used to initialize objects. The constructor is called when an object of a class is created. But in case of TypeScript only constructor() keyword is used to create a constructor.

7. What is the syntax for ngFor Loop?

The syntax for ngFor Loop is as below:

<ul>

    <li  *ngFor=" let item of items; let i= index">

{{i}}     {{item}}

</li>

</ul>

Read More

PART-4 INTERVIEW TYPE QUESTIONS

 1. What is Angular routing ?

Angular routing enables developers to build Single Page Applications with multiple views and allow navigation between these views.

      <router-outlet>     </router-outlet>

<router-outlet  name="outlet1"> </router-outlet>

2. What is Single page application?

A single-page application is an app that works inside a browser and does not require page reloading during use. SPA requests the markup and data independently and renders pages straight in the browser.

3. What is the importance of router-outlet ?

Router- outlet is the component work in Angular that is used to load the different components dynamically based on the activated component or current route state. Also by the use of router-outlet the navigation can be done.

4. What is AJAX?

AJAX is the technique by which we can do:

• Read data from a web server - after a web page has loaded.
• Update a web page without reloading the page .
• Send data to a web server- in the background.

5. How can we make a route as a startup route?

we can make a route as a startup rout as following syntax:

const routes: Routes =[

{path: '           ' , component: AdminComponent},

{path:'login' , component:AdminComponent}

];

Read More

PART-3 INTERVIEW TYPE QUESTIONS ( [ngModel], [(ngModel)], FormsModule ..... )

 1. What is camel case and pascal case?

• With camelCase, the first letter of the first word in the identifier is lower case, while the first letter of every subsequent word is uppercase. for eg: newMaheshIdentifier.
• And with PascalCase, the first letter of every word in the identifier is upper case. For eg: NewMaheshIdentifier.

2. What are directives?

Directives are custom HTML attributes which tell angular to change the style or behavior of the DOM elements.

3. What is the use of ngModel and significance of [  ] and ( ) in ngModel?

ngModel is a directive which binds input, stores the required user value in a variable, and select the textarea and we can use that variable whenever we require that value; It also used during validation in a form. We can use ngModel with:

1. Input

• text 
• chechbox
• radio
• number
• email
• url
• date
• datetime-local
• time

2. select

3. textarea

• [ngModel] - it's property binding only, not two-way binding. So entering new value will not update overRideRate. And [ngModel] is just show up.

• [(ngModel)] is two-way binding that comes from Angular.

4. What are expressions or interpolation?

Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, like: {{mahesh}} .

For eg:

<h1>Current customer: {{ maheshApplication }}</h1>

5. What is the importance of FormsModule?

FormsModule exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module. It contains the directives as: CheckboxControlValueAccessor, NumberValueAccessor, PatternValidator etc

Read More

PART-2 INTERVIEW TYPE QUESTIONS (Dependencies DevDependencies, Component , Model, Module, View, Selector... )

1. Differentiate between dependencies and dev dependencies.

DEPENDANCIES

(1) Dependancies are installed on both :

• npm install from a directory that contains package.json.
• npm install $package on any other directory.

(2) Dependancies are installed transitively: if A requires B, and B requires C, then C gets installed, otherwise, B could not work, and neither would A.

(3) Dependencies are required to run.

DEVDEPENDANCIES

(1) DevDepandancies  are:

• also installed on npm install on a directory and also that contains the package.json, unless you pass the --production flag.
• not installed on npm install "$package" on any other directory, unless you give it the --dev option.

(2) DevDependencies is not installed transitively. E.g. we don't need to test B to test A, so B's testing dependencies can be left out.

(3) devDependencies are required only to develop.

2. Explain view, components, modules and models.

MODELS

The model in an MVC-based application is generally responsible for modeling the data used in the view and handling user interactions such as clicking on buttons, scrolling, or causing other changes in the view.

COMPONENT

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

MODULES

Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules.

Module conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule.

VIEW

View is the layer that displays content to the user . It is also the presentation layer.

3. What is the industry naming convention for Angular file and folder?

Naming conventions are most important thing in the any programming languages like as angular. Some naming conventions in the angular are like as:

• Do use consistent names for all symbols.
• Do follow a pattern that describes the symbol's feature then its type. The recommended pattern is feature.type.ts .
• Separate file names with dots and dashes like , Do use dashes to separate words in the descriptive name, Do use dots to separate the descriptive name from the type.
• Do use consistent names for all assets named after what they represent.
• Do use upper camel case for class names.
• Do match the name of the symbol to the name of the file. etc.

The folder structure of an Angular Project is:

4. How does Angular application bootstrap (start) ?

Following diagram clearly shows that how the Angular application start:

5. What is a decorator?

In Angular JS, decorators are functions that allow a service, directive or filter to be modified prior to its usages. decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code.

6. What is a selector?

A selector is one of the properties of the object that we use along with the component configuration. A selector is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM(Document Object Model).It makes view of  the component possible.

7. Explain the importance of templateURL.

When you have a complex view, then it is recommended by Angular to create that complex view in an external HTML File instead of an inline template. The Angular component decorator provides a property call templateUrl and using this property you can set the external HTML file path.

Read More

PART-1 INTERVIEW TYPE QUESTIONS (ng serve , ng build , --prod ,CLI)

1. What is Angular CLI?

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

It is installed using the  npm package manager :

            npm install -g @angular/cli

2. The difference between npm install vs npm install –g?

npm install without the -g installs the specified package to the package cache of the package in the current directory. This requires you to be in the directory of a package, a directory containing a package.json file.

npm install -g install the specified package to a global package cache. This may be performed from any directory; and will make the installed package's executables available from anywhere on your system.

Simply, without -g packages are installed in local app folder. When installed with -g it gets installed globally.

 

3.What does ng serve do?

Ng serve builds and serves your app, rebuilding on file changes.

It’s Syntax is :

ng serve <project> [options]

ng s <project> [options]

Here <project> is argument and it is name of the project to build. Can be an application or a library.

Basically, when ng serve is executed (run) the server starts listening for requests and processing the ones it receives. it sets up the HTTP or HTTPS listener based on your configuration variables and options.

ng serve can also rebuild in real time, meaning if you change an angular file while it’s running it will rebuild the code base and serve the rebuilt code immediately on next refresh or next call to the listener.

4.What is the importance of SRC and E2E folder?

The key benefits of an end to end testing are listed below:

•  End to end testing tests the complete flow or the action. For example, a complete login process can be treated as one end to end testing. Basically, it tests a specific functionality.
•  It doesn’t improve the code quality as does in Unit testing. Unit testing is a different topic, and an end to end testing and unit testing are completely different.
• An end to end testing run tests on the browser, so it tests your application live, with some real data.

And the key benefits of src/ folder are as below:

• The src stands for source.
• The /src folder comprises of the raw non-minified code.
• The /src folder is used to store the file with the primary purpose of reading (and/or editing) the code. 
• The /src folder contains all the sources, i.e. the code which is required to be manipulated before it can be used. 
• Depending on the project, the /src folder may contain only the pure sources, or the non-minified versions.

So, the /src folder is primarily used to store the source code files before any minification.

5. What are the differences between ng serve vs ng build?

Both commands ng build and ng serve will clear the output folder before they build the project.

But main difference is :

ng serve	ng build
ng serve command builds the angular application in the memory, without saving the artifacts to any external folder and runs the application on the web server.	ng build command builds the angular application and generates the build artifacts which are saved under the /dist folder in the application directory.

It means the   ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.

6. What does ng build –prod flag?

ng build compiles an Angular app into an output directory named dist/ at the given output path. It must be executed from within a workspace directory.

It’s syntax is ,

               ng build <project> [options]

               ng b <project> [options]

The application builder uses the build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration.

A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying  the --configuration="production" or the --prod option.

 

Read More

INTRODUCTION TO ANGULAR

 INTRODUCTION

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is written in TypeScript.

In Angular :-

o  Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

 

o  Components use services, which provide specific functionality not directly related to views. And Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

 

The basic building blocks of the Angular framework are Angular components that are organized into NgModules. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules.

Angular NgModules differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.

To use the  Angular we should know  HTML, JavaScript, TypeScript, Node.js properly.

IMPLEMENTATION 

To create new app in Angular we need to follow following steps :

• To install the Angular CLI, open a terminal window and run the following command:    

                                                      npm install -g @angular/cli

•  Run the CLI command  ng new and provide the name  my-app

                                                       ng new my-app

•  The Angular CLI includes a server, so that you can build and serve your app locally.
• Navigate to the workspace folder, such as my-app.
• Run the following command:

                                                        cd my-app

                                                        ng serve --open

Read More

TypeScripts

1. What Is TypeScript?

When the JavaScript was developed then JavaScript development team introduced JavaScript as a client-side programming language.

But when people was using JavaScript then developer get to know that JavaScript can be used as a server-side programming language also. But When JavaScript was growing then the code of JavaScript became complex and heavy. Because of this, JavaScript was even not able to full fill the requirement of Object-oriented programming language. This prevents JavaScript from succeeding at the enterprise level as a server-side technology. Then TypeScript was developed by the development team to bridge this gap.

2. What TypeScript Really Do?

-- TypeScript Code is converted into Plain JavaScript Code:: TypeScript code is not understandable by the browsers. That’s why if the code is written in TypeScript then it is compiled and converted the code i.e. translate the code into JavaScript.The above process is known as Trans-piled. By the help of JavaScript code, browsers are able to read the code and display.

-- JavaScript is TypeScript: Whatever code is written in JavaScript can be converted to TypeScript by changing the extension from .js to .ts.

-- Use TypeScript anywhere: TypeScript code can be run on any browser, devices or in any operating system. TypeScipt is not specific to any Virtual-machine etc.

-- TypeScript supports JS libraries: With TypeScript, developers can use existing JavaScript code, incorporate popular JavaScript libraries, and can be called from other JavaScript code.

3. Advantages Of Using TypeScript Over JavaScript 
 -- TypeScript always point out the compilation errors at the time of development only. Because of this at the run-time the chance of getting errors are very less whereas JavaScript is an interpreted language.

-- TypeScript is nothing but JavaScript and some additional features i.e. ES6 features. It may not be supported in your target browser but TypeScript compiler can compile the .ts files into ES3,ES4 and ES5 also.

-- TypeScript has a feature which is strongly-typed or supports static typing. That means Static typing allows for checking type correctness at compile time. This is not available in JavaScript.

               Generally TypeScript takes the time to compilation which is the disadvantage of TypeScript.

4. Installation For TypeScript

TypeScript can be installed through three installation routes depending on how you intend to use it: an npm module, a NuGet package or a Visual Studio Extension.

If you are using Node.js, you want the npm version. If you are using MSBuild in your project, you want the NuGet package or Visual Studio extension.

You can use npm to install TypeScript globally, this means you can use the tsc command anywhere in your terminal.

To do this, run npm install -g typescript. This will install the latest version.

You can install TypeScript as a Visual Studio extension, which will allow you to use TypeScript across many MSBuild projects in Visual Studio.

The latest version is available in the Visual Studio Marketplace.

5. Simple Program And Compile Process For TypeScript

6. Import And Export In TypeScript

The export statement is used when creating JavaScript modules to export objects, functions, variables from the module so they can be used by other programs with the help of the import statements.

For export the Syntax is:

For import :

Read More