Angular4 Introduction

www.hexaware.com | © Hexaware Technologies. All rights reserved. 1

Course Objective

• To understand and develop rich interactive Web Application using Angular4.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 2

 Introduction

• Angular is a platform and framework for building client applications in HTML

and TypeScript.
• Angular is itself written in TypeScript.
• It implements core and optional functionality as a set of TypeScript libraries that
you import into your apps.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 3

Angular Is …

- A JavaScript framework.

- For building client – side applications

- Using HTML, CSS and other

programming languages such as
JavaScript.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 4

Why Angular ?

www.hexaware.com | © Hexaware Technologies. All rights reserved. 5

Why a new Angular?

www.hexaware.com | © Hexaware Technologies. All rights reserved. 6

Anatomy of an Angular Application

Application Component Component Component

Services

• Application comprised of set of components.

• Services provides functionality across those components.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 7

Component

Class
Properties
Component
Template Metadata
Methods

• Component comprised of template.

• Template defines view for the application.
• The code associated with the view defines the class contains properties and
methods such as responding to button click.
• Metadata provides the additional information about the component.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 8

Angular Modules

Root • Angular modules defines the organizer of

Angular Module an application.
• Every angular application has root angular
module.
Component • An application can have any number of
additional angular modules

Component

Component

Component

www.hexaware.com | © Hexaware Technologies. All rights reserved. 9

 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.
• Like JavaScript modules, NgModules can import functionality from other
NgModules, and allow their own functionality to be exported and used by other
NgModules.
• For example, to use the router service in your app, you import the Router
NgModule.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 10

 NgModules

• The basic building blocks of an Angular application are NgModules, which

provide a compilation context for components.
• NgModules collect related code into functional sets; an Angular app is defined
by a set of NgModules.
• An app always has at least a root module that enables bootstrapping, and
typically has many more feature modules.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 11

 Component

• Components define views, which are sets of screen elements that Angular can
choose among and modify according to your program logic and data.
• Every app has at least a root component.
• 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.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 12

 Component

• Every Angular application has at least one component, the root component that
connects a component hierarchy with the page DOM.
• Each component defines a class that contains application data and logic, and is
associated with an HTML template that defines a view to be displayed in a
target environment.
• The @Component decorator identifies the class immediately below it as a
component, and provides the template and related component-specific
metadata.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 13

Benefits of Component-based Architecture

As you can see, this component-based architecture makes our applications more
organized and maintainable. Plus, we can potentially reuse these components in
various parts of an application or in an entirely different application

www.hexaware.com | © Hexaware Technologies. All rights reserved. 14

 First Angular 4 Application Cont…

• Install the latest version of Node.

• Node comes with a tool called Node Package Manager or NPM
• NPM is used to install Angular CLI.
• Run the following command to install Angular CLI
npm install -g @angular/cli
The -g flag stands for global. If you don’t put -g here, Angular CLI will be installed
only in the current folder, and it’s not going to be accessible anywhere else.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 15

npm

• Node Package Manager is an command line utility that interacts with repository
of open source projects.
• Using npm installs libraries, packages and applications along with
dependencies

www.hexaware.com | © Hexaware Technologies. All rights reserved. 16

First Angular 4 Application Cont…

• To create a new Angular project use the following command:

ng new hello-world
• Angular CLI can be accessed using ng.
• Angular CLI will generate a new project called “hello-world” and store it in a
folder with the same name

www.hexaware.com | © Hexaware Technologies. All rights reserved. 17

First Angular 4 Application Cont…

• Run the following commands in the terminal:

 cd hello-world
 ng serve
• The command npm install will install all the dependencies of the application.
• The command ng serve compiles the application and hosts it using a
lightweight web server.
• Access the application at http://localhost:4200.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 18

 First Angular 4 Application

Open the browser and navigate to this address http://localhost:4200.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 19

Structure of Angular Projects Cont…

• Inside the generated folder, the following top-level folders are present:
• e2e: includes end-to-end tests.
• node_modules: all the third-party libraries that our project is dependent upon.
• src: the actual source code of our Angular application. 9.9% of the time you’ll
be working with the files inside the src folder.
• angular-cli.json: a configuration file for Angular CLI. This file is used to import
third-party stylesheets or define additional environments (eg testing
environment) for our application.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 20

Structure of Angular Projects Cont…

• package.json: a standard file for Node-based projects. It contains metadata

about our project, such as its name, version as well as the list of its
dependencies.
• protractor.conf.js: Protractor is a tool for running end-to-end tests for Angular
projects.
• karma.conf.js: Karma is a test runner for JavaScript applications. This file
contains some configuration for Karma.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 21

Structure of Angular Projects Cont…

• tsconfig.json: includes setting for the TypeScript compiler.

• tslint.json: includes the settings for TSLint which is a popular tool for linting
TypeScript code.
• It checks the quality of our TypeScript code based on a few configurable
parameters.
• This is especially important in a team environment to ensure that everyone
follows the same conventions and produces code of the same quality.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 22

Angular Component in Action

Open the src/app folder

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

www.hexaware.com | © Hexaware Technologies. All rights reserved. 23

Angular Component in Action

• Each component in an Angular project is physically implemented using four

files:
• A CSS file: where we define all the styles for that component. These styles will
only be scoped to this component and will not leak to the outside.
• An HTML file: contains the markup to render in the DOM.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 24

Angular Component in Action

• A spec file: includes the unit tests.

• A TypeScript file: where we define the state (the data to display) and behavior
(logic) of our component.
• An app.module.ts file is also present. This file defines the root module of our
application and tells angular how to assemble the app.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 25

Creating a Component Cont…

• Generating a Component Using Angular CLI

ng g c product
g is short for generate, c is short for component and product is the name of
our component.
• Inside the src/app folder, a new folder product is generated. Expand this
folder
– product.component.css
– product.component.html
– product.component.spec.ts
– product.component.ts

www.hexaware.com | © Hexaware Technologies. All rights reserved. 26

Creating a Component

Open product.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
www.hexaware.com | © Hexaware Technologies. All rights reserved. 27
Creating a Component

we have a TypeScript class called ProductComponent.

What is a Class?
• A class is a fundamental building block of many object-oriented programming
languages. It’s a container for a bunch of related functions and variables.
• In product.component.ts, there is a class called ProductComponent.
• This class has 2 functions (methods): constructor and ngOnInit.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 28

Creating a Component

• Constructor is a reserved keyword in TypeScript. A method by that name is a

special method in a class.
• This method is called automatically when we create an instance of that class.
• ngOnInit is a special method in Angular.
• Angular calls this method when it creates an instance of this component and
displays it to the user in the browser

www.hexaware.com | © Hexaware Technologies. All rights reserved. 29

Component Metadata

• we implement a component using a TypeScript class.

• But a class on its own is just a class. It only includes some data and logic for a
view. It doesn’t include any HTML markup or CSS styles.
• In order to attach these to this class, we need to promote this class to a
component.
• We can do this by using the @Component() decorator function on top of this
class

www.hexaware.com | © Hexaware Technologies. All rights reserved. 30

Component Metadata

import { Component, OnInit } from '@angular/core‘;

@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent {
}

www.hexaware.com | © Hexaware Technologies. All rights reserved. 31

Component Metadata

• It takes an object with the following properties:

– selector
– templateUrl
– styleUrls
• The selector associates a new HTML element to this component.
• The other 2 properties templateUrl and styleUrls. They specify the path to the
HTML template and CSS file(s) for this component.

www.hexaware.com | © Hexaware Technologies. All rights reserved. 32

 Innovative Services

Passionate Employees Thank you

www.hexaware.com
Delighted Customers

www.hexaware.com | © Hexaware Technologies. All rights reserved. 33