What is Angular?

Angular is a framework that you can use to build applications using HTML and
JavaScript/TypeScript. Some call it a web framework as a result. Using Angular will involve
accessing the various libraries that make up the framework.

As the documentation on angular.io indicates, "You write Angular applications by composing

HTML templates with Angularized markup, writing component classes to manage those
templates, adding application logic in services, and boxing components and services in
modules.

Then you launch the app by bootstrapping the root module. Angular takes over, presenting
your application content in a browser and responding to user interactions according to the
instructions you've provided."

Sounds simple, right? Not to worry, we will cover the basics you need to understand this
framework and how to get started with it in this course.

If you were asked to explain Angular in a nutshell, you might say that it is a framework that
simplifies the creation of rich, interactive, client-side web applications, using data binding.
Angular consists of various aspects that are introduced here, briefly, and then covered in more
detail throughout the course.

Important Angular Components

Modules

All of the Angular apps that you create will be modular in form. This means that you will work
with NgModules as a part of your application. When creating small web applications, you may
only use one module. Every Angular app must have at least one NgModule. This is the root
module and is commonly called AppModule.
You'll learn about creating and using Angular modules in Module 2 of this course.

Libraries

Angular includes a collection of modules written in JavaScript and these modules form
libraries within Angular, provide functionality to use in your apps. Angular libraries are noted
by the @angular prefix.

This course will cover some of the common libraries in Angular and how you can install them
using the node package manager (npm) and then how to import them into your code in the
application. Once installed and imported, the functionality in the library is available to your
application.

Components

Angular uses the concept of a component to control aspects of your application. As an

example, a component is a class that contains the logic necessary to handle an aspect of a
page, called views.

Angular handles creating and destroying these components during the user interactions with
your web application.

Templates

The view for your component is defined in a template. Templates are simply HTML working
with Angular on the proper rendering of the component within the application. Templates
use standard HTML tags that you may already be familiar with but Angular will make tags and
attributes available for the functional implementations in the template. If you have heard
Angular devs talk about the moustache operator or tag, you have already heard about some
of the Angular syntax that you will be using.

Data Binding

Interactive and dynamic web applications rely on data. You might be creating an online
shopping presence or perhaps reflecting statistics from polling stations in your web
application. Updating the user interface when data changes, is a time consuming task with
the potential for errors in the data or in the syncing of the data and UI elements.

Angular excels at data binding. You simply add binding to your markup in the templates you
create and then tell Angular how the data and UI are connected. Data binding can be one-
way or bidirectional.

Directives

Directives, in essence, are commands that you give to the Angular engine. Angular will apply
the instructions specified by the directive, when it renders the template, to transform the
DOM in your page.

You can also have structural and attribute directives as well. They are found within element
tags similar to attributes with the structural directive being responsible for altering layouts
through DOM elements.

Dependency Injection

The documentation on Angular defines dependency injection (DI) as, “a way to supply a new
instance of a class with the fully-formed dependencies it requires. Most dependencies are
services. Angular uses dependency injection to provide new components with the services
they need.”

Essentially it is a mechanism in which the components of you Angular application resolve any
dependencies related to services or components required by your component.

As you progress through the course, these concepts will be explored more fully along with
examples of implementations in code to give you hands-on practice and reinforce your
understanding.

Introducing Modules

What exactly is an Angular module? If you recall Task 2 in the Using Angular CLI lab from
Module 1, you used the command ng g module first-module to create a new module in your
Angular application. Looking at the code that was generated, you may have noticed the
@NgModule decorator after the two import statements. This is an indicator that the class is
an Angular Module. But what does that mean, specifically?

A module, in Angular, is a class file that helps you to organize all the different “pieces” of your
application. it allows you to organize these pieces into blocks.

Angular modules also allow you to extend your application's capabilities through external
libraries. Recall, again, the code from Module 1. The two import statements brought in two
Angular modules, core and common. Your application is extended by the use of these two
modules, which means your application gains the functionality found in those modules,
without you needing to write code to implement that same functionality.

You can also export your module for use in other applications. The export class
FirstModuleModule {} line in the previous lab code, means that your module is exportable
and can be imported into some other Angular application.

Using Angular modules, you can break your application into multiple components, making
your application easier to update and maintain.

Every Angular application has at least one module known as the root module. The root
module is bootstrapped to load the application. By convention, this root module is called
AppModule and you will find it in the file app.module.ts. In our application that we created in
Module 1, it is located in the src/app folder and is reproduced here for your review. Note the
export statement at the end. It indicates the module's name, AppModule.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

 @NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Module Syntax

Angular modules consist of a discrete set of attributes that you use to describe the module.
These are listed here:

 declarations - these are the list of components, directives, and pipes that are a part of the
specific module you are creating. Everything in a declaration is visible to application using this
module, without requiring any explicit exports.

 imports - using import statements, you can make other modules visible within this module.
Importing other modules is not an implicit export of those other modules, meaning simply, if
another developer imports your module, they may not be able to see the modules you have
imported.

 exports - this is the list or any declarations that you want to be made available (visible) to
other modules that may import this module.
 providers - used to list providers for configuring the injector, when this module is imported
by other modules.

 entryComponents - constitutes a list of components about which ComponentFactory should

be generated. Primarily used for dynamically loading components.

This course will walk through the creation of Angular modules and provide you with some
experience using these attributes. As an example, our sample from the lab in Module 1 is
reproduced here for comparison of the above entries found in the module.

While this sample doesn't contain every attribute listed above, it does display the most
commonly used aspects found in a simple module. We note the import statement and export
statement in this code sample as well as a list of components. You will see examples of others
in later modules.

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'GitHub Browser';

Introduction to Dependency Injection (DI)

 Dependency Injection (DI) is a software design pattern that manages how components in a
system obtain their dependencies. In Angular, Dependency Injection is responsible for:

 Creating components

 Maintaining a component's state

 Providing components to other components, as required

In Angular, DI allows us to share variables and functions between self-contained modules

without having to reuse code, and maintains the state of each component.

DI employs the injector, the service object(s) to be used, the client object that is depending
on the services it uses, and the interfaces.

Introducing the HttpClient

When we consider communication between front-end clients and back-end services using the
HTTP protocol, we note that modern browsers will use either XMLHttpRequest or the fetch()
API. The HttpClient is an asynchronous HTTP library built into Angular, replacing other
methods such as XMLHttpRequest, jQuery's $.ajax() or the more modern fetch.
Angular 4.3 and above make use of the HttpClient library as a mechanism to handle http
requests in your Angular application. This is the replacement for the Http library that was
used in AngularJS. HttpClient is available as an injectable class.

The HttpClient in Angular, provides a simplified mechanism for accessing HTTP functionality
in your client applications. It supports testability, strongly typed request and response object,
and better error handling.

Using the HttpClient

Before you can use the HttpClient in your Angular application, you have to import the
HttpClientModule.

import {HttpClientModule} from '@angular/common/http';

@NgModule({

imports: [

BrowserModule,

HttpClientModule,

],

})

Once you have imported the module, you can make use of it in your own component. In the
following code sample, which is taken from the lab for this module, you can see that we are
using injection to bring the HttpClient functionality into the service we are creating.

import { Injectable } from '@angular/core';

import { GitSearch } from './git-search';

import { HttpClient } from '@angular/common/http';

import 'rxjs/add/operator/toPromise';

@Injectable()

export class GitSearchService {

cachedValues: Array<{

[query: string]: GitSearch

}> = [];

private http: HttpClient

constructor(http: HttpClient) {

this.http = http

All of these lines of code will be covered in the tutorial lab as you build out this service but
the important aspects to note are that the HttpClient is imported at the top of the file and
then, within the @Injectable portion, we use the constructor to create an instance of the
component for use in our application.

Introduction to Services

Services are a type of component in Angular that are specifically designed to create reusable
logic that can be injected into multiple components. This makes them ideally suited for the
task of compartmentalizing API interactions, and so that is their most common use case.

When you use a service to hold your API interactions, you can easily add additional features
to your API methods such as caching, and allow your components to subscribe to a single
instance of an API call, preventing unnecessary trips to the server.

A common usage scenario for a service in Angular is to fetch data from a data source. This
could be a database running on a server somewhere, or it could be any other form of data
that you Angular application needs. In the lab for this topic, you will create a service to
retrieve simple data from a web site, in JSON format.

Creating a Service

The very first thing you do, after designing your service, is to create one using the Angular CLI.
This is accomplished with a simple command:

ng generate service service_name

This single command use the Angular CLI, calls the generate command to generate a service
and gives it a name of service_name. You should, of course, ensure that you are using
descriptive names for your services.

This will generate a file called service_name.service.ts in the src/app folder of your project.

If you open that folder, you should see the following:

import { Injectable } from '@angular/core';

@Injectable()

export class service_nameService {

constructor() { }

Notice that our service imports Injectable from @angular/core, which allows this service to
be injectable into other components. Recall that we want our service to be usable by other
components and the Angular pattern recommendations is to make the services injectable so
they can be used across components, share data, and be a singleton for instantiation when a
component needs their functionality.

Using a Service
Once you have a service created, and it is an injectable component, you can make use of it in
your components. One way to do this is to add it to the providers: section in your component,
as shown here:

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

HttpClientModule

],

providers: [service_name],

bootstrap: [AppComponent]

})

export class AppModule { }

Note that this code segment is not complete as we are missing the imports but the it is
intended to show where we would place our service so that the Angular framework will inject
it into our component.

You will also need to ensure that the service is imported in the app module as well. This will
be covered in the tutorial labs where you will create a search service, inject it into your
components, and then utilize in the application, to return data from a web site.