Angular - Getting Started: Presenter Vetrivel Gunasekaran

Angular – Getting Started
Presenter
Vetrivel Gunasekaran
Angular Introduction
COPYRIGHT © 2018 PROKARMA INC. Copyrights, trademarks, and registered trademarks for all technology described in this document are owned by the respective companies.
Introduction
• Angular is a JavaScript (actually a TypeScript based open-source full-stack web application) framework which
is used to create reactive Single Page Applications (SPAs)
• Angular is completely based on components and the code is written using TypeScript.
• Angular's versions beyond 2+ are generally referred as Angular.
• The very first version Angular 1.0 was known as AngularJS.
What is Single Page Application (SPA)?
• A single page application is a web application or a website which provides users a very fluid, reactive and fast
experience similar to a desktop application.
• It contains menu, buttons and blocks on a single page and when a user clicks on any of them, it dynamically
rewrites the current page rather than loading entire new pages from a server.
• That's the reason behind its reactive fast speed.
Evolution of Angular versions
• Angular JS was released in 2010 and it was referred as Angular 1.x version
• Angular v2 was released in 2016
• In Dec 2016 Angular v4 was introduce as v 3 was skipped due to miss alignment of the router package
versioning (3.3.0)
• In Nov 2017 Angular v5 was introduced
• In May 2018 Angular v6 was introduced
• In Oct 2018 Angular v7 was introduced
• In May 2019 Angular v8 was introduced
Configuring Angular
Install Node.js
• You should install node.js to run your Angular app.
• It manages npm dependencies support some

browsers when loading pages.
• It provides required libraries to run Angular
project.
• Node.js serves your run-time environment
as your localhost.
• Just go to node.js official website
https://nodejs.org/en/
• You must have an IDE like Visual Studio Code IDE

or JetBrains WebStorm to run your Angular app.
Use npm to install Angular CLI
• Run the Angular CLI command to install Angular CLI

npm install -g @angular/cli
or
• Just go to Angular CLI official website https://cli.angular.io/
• You will see the whole cli command to create an Angular
app.
• You need to run the first command to install Angular
CLI.
• These steps are same for Windows and Mac.
CLI
Command Line Interface
• Angular CLI is a command line interface tool which is used to initialize, develop, scaffold, and maintain
Angular applications.
• You can use this command directly on command prompt or indirectly through an interactive UI i.e. Angular
Console.
ng new
• The Angular CLI makes it easy to create an application that already works, right out of the box. It already
follows our best practices!
ng generate
• Generate components, routes, services and pipes with a simple command. The CLI will also create simple test
shells for all of these.
ng serve
• Easily test your app locally while developing.
Architecture of Angular
Structure of Project
• While we create a new project using the terminal as below:
src/app directory : This directory contains source code, css files, and html
files. This is where most of the work will be done.
app.module.ts : Parent module of the application.
main.ts : Bootstraps your application.
index.html: Root html file for your application.
Angular Building Elements
• The basic building blocks of an Angular application are NgModules, which provide a compilation context for
components.
• An app always has at least a root module that enables bootstrapping, and typically has many more feature
modules.
• 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 known as AppModule.

• It provides the bootstrap mechanism that launches the application.
• Generally, every Angular app contains many functional modules.
Some important features of Angular Modules:
• Angular NgModules import the functionalities form other NgModules just like other JavaScript modules.
• NgModules allow their own functionality to be exported and used by other NgModules. For example, if you
want to use the router service in your app, you can import the Router NgModule.
Components
• Components and services both are simply classes with decorators that mark their types and provide metadata
which guide Angular to do things.
• Every Angular application always has at least one component known as root component that connects a page
hierarchy with 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.
Services and Dependency Injection
• In Angular developers create a service class for data or logic that isn't associated with a specific view, and they
want to share across components.
• Dependency Injection (DI) is used to make your component classes lean and efficient.
• DI doesn't fetch data from the server, validate user input, or log directly to the console; it simply renders such
tasks to services.
Routing
• In Angular Router is an NgModule which provides a service that facilitates developers to define a navigation
path among the different application states and view hierarchies in their app.
It works in the same way as a browser's navigation works. i.e.:
• Enter a URL in the address bar and the browser will navigate to that corresponding page.
• Click the link on a page and the browser will navigate to a new page.
• Click the browser's back or forward buttons and the browser will navigate backward or forward according to
your seen history pages.
Bootstrap of Angular
Bootstrap of Angular
• Bootstrap of angular means how the page are loaded or booted to browser in the first place.
• For that to happen in the structure we saw previously there is main.ts which is the first code executed.
• In which we will have the specified the module which is to be bootstrapped.
• Inside the respective module we will have the component which should load first which will be declared inside
bootstrap.
• The index.html has the respective selector in its body to be rendered.
Module
Module
• Module in Angular refers to a place where you can group the components, directives, pipes, and services, which
are related to the application.
• In case you are developing a website, the header, footer, left, center and the right section become part of a
module.
• To define module, we can use the NgModule.
• When you create a new project using the Angular –cli command, the ngmodule is created in the app.module.ts
file by default and it looks as follows −
Module contd..
• The NgModule needs to be imported as follows −
import { NgModule } from '@angular/core';
• The structure for the ngmodule is as shown below −
• It starts with @NgModule and contains an object which has declarations, imports, providers and bootstrap.
Declaration
• It is an array of components created.
• If any new component gets created, it will be imported first and the reference will be included in declarations
Import
• It is an array of modules required to be used in the application.
• It can also be used by the components in the Declaration array.
• For example, right now in the @NgModule, we see the Browser Module imported
Providers Bootstrap
• This will include the services created. This includes the main app component for starting the
execution.
Component
Component
• Major part of the development with Angular is done in the components.
• Components are basically classes that interact with the .html file of the component, which gets displayed on the
browser
The file structure has the app component and it consists of the following files −
• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts
Component contd..
• And if you have selected angular routing during your project setup, files related to routing will also get added
and the files are as follows −
app-routing.module.ts
• However, the app component which is created by default will always remain the parent and the next
components created will form the child components.
• Now, angular-cli has a command to create your own component.
• Let us now run the command to create the component with the below line of code −
ng g component new-cmp
Component contd..
The following files are created in the new-cmp folder −
• new-cmp.component.css − css file for the new component is created.
• new-cmp.component.html − html file is created.
• new-cmp.component.spec.ts − this can be used for unit testing.
• new-cmp.component.ts − here, we can define the module, properties, etc.
The new-cmp.component.ts file is generated as follows −

Angular - Getting Started: Presenter Vetrivel Gunasekaran

Uploaded by

Copyright:

Available Formats

You might also like

Angular - Getting Started: Presenter Vetrivel Gunasekaran

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular - Getting Started: Presenter Vetrivel Gunasekaran

Uploaded by

Copyright:

Available Formats

Angular – Getting Started

• Angular's versions beyond 2+ are generally referred as Angular.

• The very first version Angular 1.0 was known as AngularJS.

• That's the reason behind its reactive fast speed.

• You should install node.js to run your Angular app.

• It manages npm dependencies support some

• You must have an IDE like Visual Studio Code IDE

• Run the Angular CLI command to install Angular CLI

• While we create a new project using the terminal as below:

• Every Angular app has a root module known as AppModule.

It works in the same way as a browser's navigation works. i.e.:

• In which we will have the specified the module which is to be bootstrapped.

• The index.html has the respective selector in its body to be rendered.

You might also like