EXERCISES:1
1A) Angular application setup
To develop an application using Angular on a local system, you need to set up a development
environment that includes the installation of:
Node.js (^12.20.2 || ^14.15.5 || ^16.10.0) and npm (min version required 6.13.4)
Angular CLI
Visual Studio Code
1. Steps to install Node.js
Install Node.js (^12.20.2 || ^14.15.5 || ^16.10.0) from Sparsh Downloads as shown below and take
help from CCD to get it installed.
node –v
It will display the version of the node installed.
2. Steps to install Angular CLI
Angular CLI can be installed using node package manager as shown below:
Node modules should be downloaded from Node Repository managed by Infosys.
By default, Node Package Manager(NPM) points to global Node registry and downloads
the Node modules from there. npm config set registry
https://infyartifactory.ad.infosys.com/artifactory/api/npm/npm
1.
2. npm login
3.
Post npm login, it will ask for username, password, and email. Enter the username without
@infosys.com, enter your Infosys password and email id.
Now run the following command to install CLI.
1. D:\> npm install -g @angular/cli
Test successful installation of Angular CLI using the following command
1. D:\> ng v
Angular CLI is a command-line interface tool to build Angular applications. It makes application
development faster and easier to maintain.
Using CLI, you can create projects, add files to them, and perform development tasks such as
testing, bundling, and deployment of applications.
Command Purpose
npm install -g @angular/cli Installs Angular CLI globally
ng new <project name> Creates a new Angular application
Builds and runs the application on lite-server and launches a
ng serve --open
browser
Creates a class, component, directive, interface, module, pipe,
ng generate <name>
and service
ng build Builds the application
ng update @angular/cli
Updates Angular to latest version
@angular/core
1B) Creating a Components and Modules
Open Visual Studio Code IDE. Go to the File menu and select the "Open Folder" option.
Select the MyApp folder you have created earlier.
Observe for our AppComponent you have below files
o app.component.ts
o app.component.html
o app.component.css
Let us explore each one of them
Go to src folder-> app -> open app.component.ts file
Observe the following code
1. import { Component } from '@angular/core';
2.
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'AngDemo';
10. }
11.
Line 3: Adds component decorator to the class which makes the class a component
Line 4: Specifies the tag name to be used in the HTML page to load the component
Line 5: Specifies the template or HTML file to be rendered when the component is loaded in the
HTML page. The template represents the view to be displayed
Line 6: Specifies the style sheet file which contains CSS styles to be applied to the template.
Line 8: Every component is a class (AppComponent, here) and export is used to make it accessible
in other components
Line 9: Creates a property with the name title and initializes it to value 'AngDemo'.
Open app.component.html from the app folder and observe the following code snippet in
that file
1. <span>{{ title }} app is running!</span>
2.
Line 3: Accessing the class property by placing property called title inside {{ }}. This is called
interpolation which is one of the data binding mechanisms to access class properties inside the
template.
Open index.html under the src folder.
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>MyApp</title>
6. <base href="/">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="icon" type="image/x-icon" href="favicon.ico">
9. </head>
10. <body>
11. <app-root></app-root>
12. </body>
13. </html>
14.
15.
Line 11: loads the root component in the HTML page. app-root is the selector name given to the component.
This will execute the component and renders the template inside the browser.
Execute the application and check the output.
Open terminal in Visual Studio Code IDE by selecting View Menu -> Integrated Terminal.
Type the following command to run the application
1. D:\MyApp>ng serve --open
ng serve will build and run the application
--open option will show the output by opening a browser automatically with the default port.
Use the following command to change the port number if another application is running on the default
port(4200)
1. D:\MyApp>ng serve --open --port 3000
1. In the same MyApp application created earlier, create a new component called hello using the
following CLI command
1. D:\MyApp> ng generate component hello
2. This command will create a new folder with the name hello with the following files placed
inside it
3. Open hello.component.ts file and create a property called courseName of type string and
initialize it to "Angular" as shown below in Line number 9
1. import { Component, OnInit } from '@angular/core';
2.
3. @Component({
4. selector: 'app-hello',
5. templateUrl: './hello.component.html',
6. styleUrls: ['./hello.component.css']
7. })
8. export class HelloComponent implements OnInit {
9. courseName: string = "Angular";
10.
11. constructor() { }
12.
13. ngOnInit() {
14. }
15.
16. }
4. Open hello.component.html and display the courseName as shown below in Line 2
1. <p>
2. Hello {{ courseName }}
3. </p>
5. Open hello.component.css and add the following styles for the paragraph element
1. p {
2. color:blue;
3. font-size:20px;
4. }
6. Open app.module.ts file and add HelloComponent to bootstrap property as shown below in
Line 11 to load it for execution.
1. import { NgModule } from '@angular/core';
2. import { BrowserModule } from '@angular/platform-browser';
3.
4. import { AppRoutingModule } from './app-routing.module';
5. import { AppComponent } from './app.component';
6. import { HelloComponent } from './hello/hello.component';
7.
8. @NgModule({
9. imports: [BrowserModule,AppRoutingModule],
10. declarations: [AppComponent, HelloComponent],
11. providers: [],
12. bootstrap: [HelloComponent]
13. })
14. export class AppModule { }
7. Open index.html and load the hello component by using its selector name i.e., app-hello as
shown below in Line 11
1. <!doctype html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8">
5. <title>MyApp</title>
6. <base href="/">
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="icon" type="image/x-icon" href="favicon.ico">
9. </head>
10. <body>
11. <app-hello></app-hello>
12. </body>
13. </html>
8. Now run the application by giving the following command
1. D:\MyApp>ng serve --open
1 c)Elements of Template
Introduction to Templates
Templates separate the view layer from the rest of the framework.
You can change the view layer without breaking the application.
Templates in Angular represents a view and its role is to display data and change the data
whenever an event occurs
The default language for templates is HTML
Creating a template Template can be defined in two ways:
Inline Template
External Template
You can create an inline template in a component class itself using the template property of the
@Component decorator.
app.component.ts
1. import { Component } from '@angular/core';
2.
3. @Component({
4. selector: 'app-root',
5. template: `
6. <h1> Welcome </h1>
7. <h2> Course Name: {{ courseName }}</h2>
8. `,
9. styleUrls: ['./app.component.css']
10. })
11. export class AppComponent {
12. courseName = "Angular";
13. }
14.
Line 5-8: You can even write HTML code inside the component using the template property. Use
backtick character (`) for multi-line strings.
Output:
By default, Angular CLI uses the external template.
It binds the external template with a component using templateUrl option.
Example
app.component.html
1. <h1> Welcome </h1>
2. <h2> Course Name: {{ courseName }}</h2>
app.component.ts
1. import { Component } from '@angular/core';
2.
3. @Component({
4. selector: 'app-root',
5. templateUrl:'./app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. courseName = "Angular";
10. }
11.
Line 5: templateUrl property is used to bind an external template file with the component
Output:
1 D)Change Detection
How does Angular detect the changes and update the application at the respective places?
Angular uses its change detection mechanism to detect the changes and update the application at the respective
places. Angular applications run faster than Angular 1.x applications due to the improved change detection
mechanism.
What is the change detection mechanism, and how it helps to run Angular applications so fast?
Change Detection is a process in Angular that keeps views in sync with the models.
In Angular, the flow is unidirectional from top to bottom in a component tree. A change in a web
application can be caused by events, Ajax calls, and timers which are all asynchronous.
Who informs Angular about the changes?
Zones inform Angular about the changes in the application. It automatically detects all asynchronous
actions at run time in the application.
What does Angular do when a change is detected?
Angular runs a change detector algorithm on each component from top to bottom in the component tree.
This change detector algorithm is automatically generated at run time which will check and update the
changes at appropriate places in the component tree.
Angular is very fast though it goes through all components from top to bottom for every single event as
it generates VM-friendly code. Due to this, Angular can perform hundreds of thousands of checks in a
few milliseconds.
Highlights:
Exploring the WelcomeComponent in the mCart application
Understanding the template and styling for WelcomeComponent
Demosteps:
In the mCart application, there is a welcome screen displayed on application launch, as shown here.
This welcome screen is created in the WelcomeComponent.
You can find the files related to WelcomeComponent in the welcome folder present inside the app folder
(src --> app --> welcome).
1. Code for WelcomeComponent is present in the file welcome.component.ts.
1. import { Component } from '@angular/core';
2.
3. @Component({
4. templateUrl: 'welcome.component.html',
5. styleUrls: ['welcome.component.css']
6. })
7. export class WelcomeComponent {
8. public pageTitle = 'Welcome';
9.
10. constructor() {
11.
12. }
13. }
14.
15.
Line 3-6: @Component marks the class as component and the component is bound with template and CSS file
using templateUrl and styleUrls properties respectively.
Line 8: Creates a property called pageTitle and initialized it to “welcome”.
Line 11: This statement displays the login button at the top right corner of the page.
2. Code for WelcomeComponent template is present in the welcome.component.html file.
1. <!-- Welcome page -->
2. <div class="container container-styles">
3. <div class="panel panel-primary">
4. <div class="panel-heading">{{pageTitle}}</div>
5. <div class="panel-body">
6. <div class="row">
7. <span class="img-responsive center-block logo-styles">
8. <span class="glyphicon glyphicon-shopping-cart">
</span>
9. </span>
10. <div id="div1" class="shadow title-styles">mCart</div>
11.
12. </div>
13. <br />
14. <div class="row">
15. <div class="text-center text-styles">An online app to purchase
mobile gadgets</div>
16. </div>
17. </div>
18. </div>
19. </div>
20.
Line 4: pageTitle property is rendered using interpolation.
Line 7-9: Displays a shopping cart symbol. Used bootstrap CSS classes for this.
Line 10: Displays mCart title.
3. Code for the styling of Welcome Component is present in the welcome.component.css file.
1. .shadow {
2. text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
3. }
4.
5. .logo-styles{
6. width: 50px;
7. font-size: 50px;
8. color: #ff0080
9. }
10.
11. .title-styles{
12. text-align: center;
13. color: #ff0080;
14. font-size: 40px
15. }
16.
17. .text-styles{
18. color:#337ab7;
19. font-size: 15px
20. }
21.
22. .container-styles{
23. position: relative;
24. top: 180px;
25. width:50%
26. }
27.
Line 1-3: shadow class applies a shadow effect to mCart text
Line 5-9: logo-styles class applies width, font size and color properties to the shopping cart logo
Line 11-15: title-styles class applies the mentioned CSS properties to mCart text
Line 17-20: text-styles class applies the mentioned CSS properties to the description text rendered at the bottom
of the welcome component
Line 22-26: container-styles class applies the mentioned CSS properties to the entire container
