Angular is a platform for building mobile and desktop web applications. Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
Questions to answer
-
What the use of Angular?
Ans: Angular is a Javascript UI Binding framework which helps you to bind the HTML UI and javascript model.
Angular is a platform and framework for building single-page client applications using HTML and Typescript. Angular is written in Typescript. It implements core and optional functionality as set of Typescript libraries that you can import into your apps.
AngularJS Angular (1.x) (2.0+) Language Controller Component Mobile Complient No Yes CLI No Yes Lazy Loading No Yes SEO No Yes Server Side No Yes -
What are directives in Angular?
A class that can modify structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immidiately preceeded by @Directive() decorator that supplies metadata.
A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When angular finds a directive in HTML template, it creates the matching class instance and gives the instance control over that portion of the browser DOM.
There are thre categories of directive:
- Components use @Component() (an extension of @Directive()) to associate a template with a class.
- Attribute directives modify behaviour and appearance of page element.
- Structural Directives modify the structure of the DOM.
Angular supplies a number of built-in directives that begin with the ng-prefix. You can also create new directives to implement your own functionality.
- Explain the importance of NPM and Node_Modules folder in Angular.
- Explain the importance of package.json file in Angular.
- What is typescipt and why do we need it?
- Explain importance of Angular CLI.
- Explain the different types of Angular directives
- What is a decorator in Angular?
- What are annotations or metadata?
- What is a template?
- Explain four types of data bindings in Angular.
-
Explain architecture of Angular.
- What is SPA in Angular?
- How to implement SPA in Angular?
- How to implement routing in Angular?
- Explain lazy loading.
- How to implement laze loading in Angular?
- Define Services.
- What is dependency injection.
- How to implement dependency injection.
- What is the benefit of dependency injection.
- Differentiate between ng-serve and ng-build.
How to create new Angular project in docker dev environment?
Prerequisite
- Docker should be running with WSL2 enabled.
- Remote Containers VS Code extension is installed.
Create new folder for the project.
Add new subfolder app
Closed folder from ‘File’ menu and open folder *
Add new folder .devcontainer in the app folder.
Add new file devcontainer.json in the .devcontainer folder with following code.
{
"name": "GreenwoodsWeb",
"dockerFile": "Dockerfile",
"forwardPorts": [4200],
"runArgs": ["-u", "node"],
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
"postCreateCommand": "npm install",
"extensions": [
"esbenp.prettier-vscode",
"johnpapa.angular-essentials",
"coenraads.bracket-pair-colorizer",
"dbaeumer.vscode-eslint",
"ms-vscode.vscode-typescript-tslint-plugin",
"angular.ng-template"
]
}
Create new Dockerfile in the .devcontainer folder as below
FROM node:latest
RUN npm install -g @angular/cli
RUN npm install -g prettier
Click on Open Removte Window button available at the bottom-left corner of the VS Code. Then select Remote Containers: Reopen in Container from command pallette.
Please wait while new container is being created.
Now you have a new development environment in docker with latest angular and node version.
Open a new terminal and run command *ng new
A new project will be create in the docker volume mapped to current folder.
Go to app folder. cd community and run below command to add enable angular material theme.
ng add @angular/material
The ng add command will additionally perform the following configurations:
- Add project dependencies to package.json
- Add the Roboto font to your index.html
- Add the Material Design icon font to your index.html
- Add a few global CSS styles to:
- Remove margins from body
- Set height: 100% on html and body
- Set Roboto as the default application font
Run ng serve in termnal window and then go to http://localhost:4200 to confirm that environment is set correctly.
Open commnunity/src/app/app.component.html and delete everything except <router-outlet></router-outlet>
–watch is enable by default when you run ng serve so that any change in code is immidiately compiled and reflected in the browser. But if in case, this is not happening in the ‘Remote container’ linux environent then work around is to run as below.
ng serve --poll=2000
If you run into Ivy related issues when trying to use material component, then update package.json as below to fix the issue.
{
"scripts": {
"postinstall": "ngcc"
}
}
Run npm install after updating package.json
Next,
Add a new components ‘home’, ‘about-us’ and ‘contact-us’ using below command
ng g c home
ng g c about-us
ng g c contact-us
Add routes as below to app module
const routes: Routes = [
{ path: 'about-us', component: AboutUsComponent},
{ path: 'contact-us', component: ContactUsComponent},
{ path: 'home', component: HomeComponent},
{ path: '', redirectTo: '/home', pathMatch: 'full'}
];
Update imports section by adding RouterModule as below
imports: [
...
RouterModule.forRoot(routes),
...
],
Add guest module for non-authenticated users of the site.
ng g m guest --routing=true
Add a new component in guest module
ng g c guest/guest
ng g c guest/guest-home
ng g c guest/guest-header
ng g c guest/guest-footer
ng g c guest/guest-login
Add <router-outlet></router-outlet> to guest.component.html
Update guest-routing.module.ts code as below
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GuestHomeComponent } from './guest-home/guest-home.component';
import { GuestComponent } from './guest/guest.component';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: 'guest', component: GuestComponent, children: [
{ path: 'login', component: LoginComponent},
{ path: 'home', component: GuestHomeComponent},
{ path: '', redirectTo: '/guest/home', pathMatch: 'full'}
]}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class GuestRoutingModule { }
Update guest.component.html as below
<app-guest-header></app-guest-header>
<router-outlet></router-outlet>
<app-guest-footer></app-guest-footer>